You can highlight individual data markers (values) in a line sparkline by making some or all of the markers visible.
showFirst: whether the first data point is formatted differently for each sparkline in this sparkline group
showHigh: whether the data points with the highest value are formatted differently for each sparkline in this sparkline group
showLast: whether the last data point is formatted differently for each sparkline in this sparkline group
showLow: whether the data points with the lowest value are formatted differently for each sparkline in this sparkline group
showNegative: whether the negative data points are formatted differently for each sparkline in this sparkline group
showMarkers: whether data markers are displayed for each sparkline in this sparkline group
You can change the style and format of sparklines using the following methods:
axisColor: the color of the axis*
firstMarkerColor: the color of the first data point for each sparkline in this sparkline group
highMarkerColor: the color of the highest data point for each sparkline in this sparkline group
lastMarkerColor: the color of the last data point for each sparkline in this sparkline group
lowMarkerColor: the color of the lowest data point for each sparkline in this sparkline group
markersColor: the color of the data markers for each sparkline in this sparkline group
negativeColor: the color of the negative data points for each sparkline in this sparkline group
seriesColor: the color for each sparkline in this sparkline group
Sparklines offer additional settings. For example, sometimes there are empty values in the data series in the chart. You can use the displayEmptyCellsAs option to control how to display the empty cells, as shown in the following example:
The following example illustrates how to apply these settings:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
let spread = null;
export function AppFunc() {
const [sparklineSetting, setSparklineSetting] = React.useState({
firstMarkerColor: '(none)',
buttonDisable: true,
type: 0,
highMarkerColor: 'Blue',
lastMarkerColor: '(none)',
lowMarkerColor: 'Blue',
negativeMarkerColor: 'Brown',
markersColor: '(none)',
axisColor: 'black',
seriesColor: '(none)',
showFirst: false,
showHigh: false,
showLast: false,
showLow: false,
showNegative: true,
showMarkers: false,
displayXAxis: true
});
const buttonClick = () => {
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
let sparklineType = sparklineSetting.type;
if (sels && sels.length > 0) {
let sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
let sparkline = findSparkLine(sheet, sel);
if (sparkline != null) {
sparkline.setting(buildSparklineSettings(setting));
sparkline.sparklineType(sparklineType);
}
}
sheet.resumePaint();
}
const showFirstChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showFirst: value
});
}
const showHighChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showHigh: value
});
}
const showLastChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showLast: value
});
}
const showLowChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showLow: value
});
}
const showNegativeChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showNegative: value
});
}
const showMarkersChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
showMarkers: value
});
}
const displayXAxisChange = (e) => {
let value = e.target.checked;
setSparklineSetting({
...sparklineSetting,
displayXAxis: value
});
}
const firstMarkerColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
firstMarkerColor: value
});
}
const typeChange = (e) => {
let value = parseInt(e.target.value);
setSparklineSetting({
...sparklineSetting,
type: value
});
}
const highMarkerColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
highMarkerColor: value
});
}
const lastMarkerColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
lastMarkerColor: value
});
}
const lowMarkerColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
lowMarkerColor: value
});
}
const negativeMarkerColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
negativeMarkerColor: value
});
}
const markersColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
markersColor: value
});
}
const axisColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
axisColor: value
});
}
const seriesColorChange = (e) => {
let value = e.target.value;
setSparklineSetting({
...sparklineSetting,
seriesColor: value
});
}
const getActualRange = (range, maxRowCount, maxColCount) => {
let row = range.row < 0 ? 0 : range.row;
let col = range.col < 0 ? 0 : range.col;
let rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
let colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GC.Spread.Sheets.Range(row, col, rowCount, colCount);
}
const findSparkLine = (sheet, range) => {
let row = range.row,
col = range.col,
rowCount = range.rowCount,
colCount = range.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
let sparkline = sheet.getSparkline(row + i, col + j);
if (sparkline != null) {
return sparkline;
}
}
}
return null;
}
const buildSparklineSettings = (setting) => {
if (setting == null) setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
let firstMarkerColor = sparklineSetting.firstMarkerColor;
if (firstMarkerColor != '(none)') setting.options.firstMarkerColor = firstMarkerColor;
let highMarkerColor = sparklineSetting.highMarkerColor;
if (highMarkerColor != '(none)') setting.options.highMarkerColor = highMarkerColor;
let lastMarkerColor = sparklineSetting.lastMarkerColor;
if (lastMarkerColor != '(none)') setting.options.lastMarkerColor = lastMarkerColor;
let lowMarkerColor = sparklineSetting.lowMarkerColor;
if (lowMarkerColor != '(none)') setting.options.lowMarkerColor = lowMarkerColor;
let negativeMarkerColor = sparklineSetting.negativeMarkerColor;
if (negativeMarkerColor != '(none)') setting.options.negativeColor = negativeMarkerColor;
let markersColor = sparklineSetting.markersColor;
if (markersColor != '(none)') setting.options.markersColor = markersColor;
let AxisColor = sparklineSetting.axisColor;
if (AxisColor != '(none)') setting.options.axisColor = AxisColor;
let SeriesColor = sparklineSetting.seriesColor;
if (SeriesColor != '(none)') setting.options.seriesColor = SeriesColor;
setting.options.showFirst = sparklineSetting.showFirst;
setting.options.showHigh = sparklineSetting.showHigh;
setting.options.showLast = sparklineSetting.showLast;
setting.options.showLow = sparklineSetting.showLow;
setting.options.showNegative = sparklineSetting.showNegative;
setting.options.showMarkers = sparklineSetting.showMarkers;
setting.options.displayXAxis = sparklineSetting.displayXAxis;
return setting;
}
const initSpread = (currSpread) => {
spread = currSpread;
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
var data = [1,-2,-1,6,4,-4,3,8];
var dateAxis = [new Date(2011, 0, 5),new Date(2011, 0, 1),new Date(2011, 1, 11),new Date(2011, 2, 1),
new Date(2011, 1, 1),new Date(2011, 1, 3),new Date(2011, 2, 6),new Date(2011, 1, 19)];
sheet.setValue(0, 0, "Series 1");
sheet.setValue(0, 1, "Series 2");
for(let i=0;i<8;i++)
{
sheet.setValue(i+1, 0,data[i]);
sheet.getCell(i+1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd");
}
sheet.setColumnWidth(1,100);
sheet.setValue(10, 0, "*Data Range is A2-A9");
sheet.setValue(11, 0, "*Date axis range is B2-B9");
var dataRange = new spreadNS.Range(1, 0, 8, 1);
var dateAxisRange = new spreadNS.Range(1, 1, 8, 1);
sheet.getCell(13, 0).text("Sparkline with dateAxis:");
sheet.getCell(14, 0).text("(1) Line");
sheet.getCell(14, 3).text("(2)Column");
sheet.getCell(14, 6).text("(3)Winloss");
//line
sheet.addSpan(15, 0, 4, 3);
var setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 0, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.line
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//column
sheet.addSpan(15, 3, 4, 3);
setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 3, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.column
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//winloss
sheet.addSpan(15, 6, 4, 3);
setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.displayXAxis = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 6, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.winloss
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, selectionChangedCallback);
sheet.resumePaint();
function selectionChangedCallback() {
let sheet = spread.getActiveSheet();
let sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (sparkline) {
getSparklineSettings(sparkline);
setSparklineSetting({
...sparklineSetting,
buttonDisable: false
});
} else {
initSparklineSettings();
setSparklineSetting({
...sparklineSetting,
buttonDisable: true
});
}
}
function initSparklineSettings() {
setSparklineSetting({
...sparklineSetting,
type: 0,
firstMarkerColor: '(none)',
highMarkerColor: 'Blue',
lastMarkerColor: '(none)',
lowMarkerColor: 'Blue',
negativeMarkerColor: 'Brown',
markersColor: '(none)',
axisColor: 'Black',
seriesColor: '(none)',
showFirst: false,
showHigh: false,
showLow: false,
showLast: false,
showNegative: false,
showMarkers: false,
displayXAxis: true
});
}
function getSparklineSettings(sparkline) {
let setting = sparkline.setting();
setSparklineSetting({
...sparklineSetting,
type: sparkline.sparklineType(),
firstMarkerColor: setting.options.firstMarkerColor,
highMarkerColor: setting.options.highMarkerColor,
lastMarkerColor: setting.options.lastMarkerColor,
lowMarkerColor: setting.options.lowMarkerColor,
negativeMarkerColor: setting.options.negativeColor,
markersColor: setting.options.markersColor,
axisColor: setting.options.axisColor,
seriesColor: setting.options.seriesColor,
showFirst: setting.options.showFirst,
showHigh: setting.options.showHigh,
showLow: setting.options.showLow,
showLast: setting.options.showLast,
showNegative: setting.options.showNegative,
showMarkers: setting.options.showMarkers,
displayXAxis: setting.options.displayXAxis
});
}
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
panelInfo={sparklineSetting} buttonClick={() => { buttonClick() }} showFirstChange={(e) => { showFirstChange(e) }}
showHighChange={(e) => { showHighChange(e) }} showLastChange={(e) => { showLastChange(e) }} showLowChange={(e) => { showLowChange(e) }}
showNegativeChange={(e) => { showNegativeChange(e) }} showMarkersChange={(e) => { showMarkersChange(e) }}
displayXAxisChange={(e) => { displayXAxisChange(e) }} firstMarkerColorChange={(e) => { firstMarkerColorChange(e) }}
typeChange={(e) => { typeChange(e) }} highMarkerColorChange={(e) => { highMarkerColorChange(e) }} lastMarkerColorChange={(e) => { lastMarkerColorChange(e) }}
lowMarkerColorChange={(e) => { lowMarkerColorChange(e) }} negativeMarkerColorChange={(e) => { negativeMarkerColorChange(e) }}
markersColorChange={(e) => { markersColorChange(e) }} axisColorChange={(e) => { axisColorChange(e) }}
seriesColorChange={(e) => { seriesColorChange(e) }}
></Panel>
</div>
);
}
const Panel = (props) => {
const { panelInfo, buttonClick, showFirstChange,
showHighChange, showLastChange, showLowChange,
showNegativeChange, showMarkersChange,
displayXAxisChange, firstMarkerColorChange,
typeChange, highMarkerColorChange, lastMarkerColorChange,
lowMarkerColorChange, negativeMarkerColorChange,
markersColorChange, axisColorChange,
seriesColorChange } = props;
return (
<div class="options-container">
<div class="option-row">
<label>*Select a sparkline in the spreadsheet then change its properties</label>
</div>
<div class="option-row">
<div class="option">
<input id='btnChangeSetting' type='button' disabled={panelInfo.buttonDisable} value='Change Setting' onClick={() => { buttonClick() }} />
</div>
</div>
<div class="option-row">
<div class="option">
<input checked={panelInfo.showFirst} id='showFirst' type='checkbox' onChange={(e) => { showFirstChange(e) }} />
<label for="showFirst">showFirst</label>
</div>
<div class="option">
<input checked={panelInfo.showHigh} id='showHigh' type='checkbox' onChange={(e) => { showHighChange(e) }} />
<label for="showHigh">showHigh</label>
</div>
<div class="option">
<input id='showLast' type='checkbox' checked={panelInfo.showLast} onChange={(e) => { showLastChange(e) }} />
<label for="showLast">showLast</label>
</div>
<div class="option">
<input id='showLow' type='checkbox' checked={panelInfo.showLow} onChange={(e) => { showLowChange(e) }} />
<label for="showLow">showLow</label>
</div>
<div class="option">
<input id='showNegative' type='checkbox' checked={panelInfo.showNegative} onChange={(e) => { showNegativeChange(e) }} />
<label for="showNegative">showNegative</label>
</div>
<div class="option">
<input id='showMarkers' type='checkbox' checked={panelInfo.showMarkers} onChange={(e) => { showMarkersChange(e) }} />
<label for="showMarkers">showMarkers</label>
</div>
<div class="option">
<input id="displayXAxis" type="checkbox" checked={panelInfo.displayXAxis} onChange={(e) => { displayXAxisChange(e) }} />
<label for="displayXAxis">displayXAxis</label>
</div>
</div>
<div class="option-row">
<div class="option">
<label for="firstMarkerColor" class="block">First Marker Color</label>
<input id='firstMarkerColor' class="control" value={panelInfo.firstMarkerColor} onChange={(e) => { firstMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="sparklinetype" class="block">Type:</label>
<select id="sparklinetype" class="control" value={panelInfo.type} onChange={(e) => { typeChange(e) }}>
<option value="0">line</option>
<option value="1">column</option>
<option value="2">winloss</option>
</select>
</div>
<div class="option">
<label for="highMarkerColor" class="block">High Marker Color</label>
<input id='highMarkerColor' class="control" value={panelInfo.highMarkerColor} onChange={(e) => { highMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="lastMarkerColor" class="block">Last Marker Color</label>
<input id='lastMarkerColor' class="control" value={panelInfo.lastMarkerColor} onChange={(e) => { lastMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="lowMarkerColor" class="block">Low Marker Color</label>
<input id='lowMarkerColor' class="control" value={panelInfo.lowMarkerColor} onChange={(e) => { lowMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="negativeMarkerColor" class="block">Negative Marker Color</label>
<input id='negativeMarkerColor' class="control" value={panelInfo.negativeMarkerColor} onChange={(e) => { negativeMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="markersColor" class="block">Markers Color</label>
<input id='markersColor' class="control" value={panelInfo.markersColor} onChange={(e) => { markersColorChange(e) }} />
</div>
<div class="option">
<label for="AxisColor" class="block">Axis Color</label>
<input id='AxisColor' class="control" value={panelInfo.axisColor} onChange={(e) => { axisColorChange(e) }} />
</div>
<div class="option">
<label for="SeriesColor" class="block">SeriesColor</label>
<input id='SeriesColor' class="control" value={panelInfo.seriesColor} onChange={(e) => { seriesColorChange(e) }} />
</div>
</div>
</div>
)
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
firstMarkerColor: '(none)',
buttonDisable: true,
type: 0,
highMarkerColor: 'Blue',
lastMarkerColor: '(none)',
lowMarkerColor: 'Blue',
negativeMarkerColor: 'Brown',
markersColor: '(none)',
axisColor: 'black',
seriesColor: '(none)',
showFirst: false,
showHigh: false,
showLast: false,
showLow: false,
showNegative: true,
showMarkers: false,
displayXAxis: true
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
panelInfo={this.state} buttonClick={() => { this.buttonClick() }} showFirstChange={(e) => { this.showFirstChange(e) }}
showHighChange={(e) => { this.showHighChange(e) }} showLastChange={(e) => { this.showLastChange(e) }} showLowChange={(e) => { this.showLowChange(e) }}
showNegativeChange={(e) => { this.showNegativeChange(e) }} showMarkersChange={(e) => { this.showMarkersChange(e) }}
displayXAxisChange={(e) => { this.displayXAxisChange(e) }} firstMarkerColorChange={(e) => { this.firstMarkerColorChange(e) }}
typeChange={(e) => { this.typeChange(e) }} highMarkerColorChange={(e) => { this.highMarkerColorChange(e) }} lastMarkerColorChange={(e) => { this.lastMarkerColorChange(e) }}
lowMarkerColorChange={(e) => { this.lowMarkerColorChange(e) }} negativeMarkerColorChange={(e) => { this.negativeMarkerColorChange(e) }}
markersColorChange={(e) => { this.markersColorChange(e) }} axisColorChange={(e) => { this.axisColorChange(e) }}
seriesColorChange={(e) => { this.seriesColorChange(e) }}
></Panel>
</div>
)
}
buttonClick() {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
let sels = sheet.getSelections();
let setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
let sparklineType = this.state.type;
if (sels && sels.length > 0) {
let sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
let sparkline = this.findSparkLine(sheet, sel);
if (sparkline != null) {
sparkline.setting(this.buildSparklineSettings(setting));
sparkline.sparklineType(sparklineType);
}
}
sheet.resumePaint();
}
showFirstChange(e) {
let value = e.target.checked;
this.setState(() => ({
showFirst: value
}));
}
showHighChange(e) {
let value = e.target.checked;
this.setState(() => ({
showHigh: value
}));
}
showLastChange(e) {
let value = e.target.checked;
this.setState(() => ({
showLast: value
}));
}
showLowChange(e) {
let value = e.target.checked;
this.setState(() => ({
showLow: value
}));
}
showNegativeChange(e) {
let value = e.target.checked;
this.setState(() => ({
showNegative: value
}));
}
showMarkersChange(e) {
let value = e.target.checked;
this.setState(() => ({
showMarkers: value
}));
}
displayXAxisChange(e) {
let value = e.target.checked;
this.setState(() => ({
displayXAxis: value
}));
}
firstMarkerColorChange(e) {
let value = e.target.value;
this.setState(() => ({
firstMarkerColor: value
}));
}
typeChange(e) {
let value = parseInt(e.target.value);
this.setState(() => ({
type: value
}));
}
highMarkerColorChange(e) {
let value = e.target.value;
this.setState(() => ({
highMarkerColor: value
}));
}
lastMarkerColorChange(e) {
let value = e.target.value;
this.setState(() => ({
lastMarkerColor: value
}));
}
lowMarkerColorChange(e) {
let value = e.target.value;
this.setState(() => ({
lowMarkerColor: value
}));
}
negativeMarkerColorChange(e) {
let value = e.target.value;
this.setState(() => ({
negativeMarkerColor: value
}));
}
markersColorChange(e) {
let value = e.target.value;
this.setState(() => ({
markersColor: value
}));
}
axisColorChange(e) {
let value = e.target.value;
this.setState(() => ({
axisColor: value
}));
}
seriesColorChange(e) {
let value = e.target.value;
this.setState(() => ({
seriesColor: value
}));
}
getActualRange(range, maxRowCount, maxColCount) {
let row = range.row < 0 ? 0 : range.row;
let col = range.col < 0 ? 0 : range.col;
let rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
let colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GC.Spread.Sheets.Range(row, col, rowCount, colCount);
}
findSparkLine(sheet, range) {
let row = range.row,
col = range.col,
rowCount = range.rowCount,
colCount = range.colCount;
for (let i = 0; i < rowCount; i++) {
for (let j = 0; j < colCount; j++) {
let sparkline = sheet.getSparkline(row + i, col + j);
if (sparkline != null) {
return sparkline;
}
}
}
return null;
}
buildSparklineSettings(setting) {
if (setting == null) setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
let firstMarkerColor = this.state.firstMarkerColor;
if (firstMarkerColor != '(none)') setting.options.firstMarkerColor = firstMarkerColor;
let highMarkerColor = this.state.highMarkerColor;
if (highMarkerColor != '(none)') setting.options.highMarkerColor = highMarkerColor;
let lastMarkerColor = this.state.lastMarkerColor;
if (lastMarkerColor != '(none)') setting.options.lastMarkerColor = lastMarkerColor;
let lowMarkerColor = this.state.lowMarkerColor;
if (lowMarkerColor != '(none)') setting.options.lowMarkerColor = lowMarkerColor;
let negativeMarkerColor = this.state.negativeMarkerColor;
if (negativeMarkerColor != '(none)') setting.options.negativeColor = negativeMarkerColor;
let markersColor = this.state.markersColor;
if (markersColor != '(none)') setting.options.markersColor = markersColor;
let AxisColor = this.state.axisColor;
if (AxisColor != '(none)') setting.options.axisColor = AxisColor;
let SeriesColor = this.state.seriesColor;
if (SeriesColor != '(none)') setting.options.seriesColor = SeriesColor;
setting.options.showFirst = this.state.showFirst;
setting.options.showHigh = this.state.showHigh;
setting.options.showLast = this.state.showLast;
setting.options.showLow = this.state.showLow;
setting.options.showNegative = this.state.showNegative;
setting.options.showMarkers = this.state.showMarkers;
setting.options.displayXAxis = this.state.displayXAxis;
return setting;
}
initSpread(spread) {
this.spread = spread;
let spreadNS = GC.Spread.Sheets;
let self = this;
let sheet = this.spread.getSheet(0);
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
var data = [1,-2,-1,6,4,-4,3,8];
var dateAxis = [new Date(2011, 0, 5),new Date(2011, 0, 1),new Date(2011, 1, 11),new Date(2011, 2, 1),
new Date(2011, 1, 1),new Date(2011, 1, 3),new Date(2011, 2, 6),new Date(2011, 1, 19)];
sheet.setValue(0, 0, "Series 1");
sheet.setValue(0, 1, "Series 2");
for(let i=0;i<8;i++)
{
sheet.setValue(i+1, 0,data[i]);
sheet.getCell(i+1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd");
}
sheet.setColumnWidth(1,100);
sheet.setValue(10, 0, "*Data Range is A2-A9");
sheet.setValue(11, 0, "*Date axis range is B2-B9");
var dataRange = new spreadNS.Range(1, 0, 8, 1);
var dateAxisRange = new spreadNS.Range(1, 1, 8, 1);
sheet.getCell(13, 0).text("Sparkline with dateAxis:");
sheet.getCell(14, 0).text("(1) Line");
sheet.getCell(14, 3).text("(2)Column");
sheet.getCell(14, 6).text("(3)Winloss");
//line
sheet.addSpan(15, 0, 4, 3);
var setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 0, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.line
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//column
sheet.addSpan(15, 3, 4, 3);
setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 3, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.column
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
//winloss
sheet.addSpan(15, 6, 4, 3);
setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.displayXAxis = true;
setting.options.showNegative = true;
sheet.setSparkline(15, 6, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.winloss
, setting
, dateAxisRange
, spreadNS.Sparklines.DataOrientation.vertical
);
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, selectionChangedCallback);
sheet.resumePaint();
function selectionChangedCallback() {
let sheet = self.spread.getActiveSheet();
let sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (sparkline) {
getSparklineSettings(sparkline);
self.setState(() => ({
buttonDisable: false
}));
} else {
initSparklineSettings();
self.setState(() => ({
buttonDisable: true
}));
}
}
function initSparklineSettings() {
self.setState(() => ({
type: 0,
firstMarkerColor: '(none)',
highMarkerColor: 'Blue',
lastMarkerColor: '(none)',
lowMarkerColor: 'Blue',
negativeMarkerColor: 'Brown',
markersColor: '(none)',
axisColor: 'Black',
seriesColor: '(none)',
showFirst: false,
showHigh: false,
showLow: false,
showLast: false,
showNegative: false,
showMarkers: false,
displayXAxis: true
}));
}
function getSparklineSettings(sparkline) {
let setting = sparkline.setting();
self.setState({
type: sparkline.sparklineType(),
firstMarkerColor: setting.options.firstMarkerColor,
highMarkerColor: setting.options.highMarkerColor,
lastMarkerColor: setting.options.lastMarkerColor,
lowMarkerColor: setting.options.lowMarkerColor,
negativeMarkerColor: setting.options.negativeColor,
markersColor: setting.options.markersColor,
axisColor: setting.options.axisColor,
seriesColor: setting.options.seriesColor,
showFirst: setting.options.showFirst,
showHigh: setting.options.showHigh,
showLow: setting.options.showLow,
showLast: setting.options.showLast,
showNegative: setting.options.showNegative,
showMarkers: setting.options.showMarkers,
displayXAxis: setting.options.displayXAxis
});
}
}
}
const Panel = (props) => {
const { panelInfo, buttonClick, showFirstChange,
showHighChange, showLastChange, showLowChange,
showNegativeChange, showMarkersChange,
displayXAxisChange, firstMarkerColorChange,
typeChange, highMarkerColorChange, lastMarkerColorChange,
lowMarkerColorChange, negativeMarkerColorChange,
markersColorChange, axisColorChange,
seriesColorChange } = props;
return (
<div class="options-container">
<div class="option-row">
<label>*Select a sparkline in the spreadsheet then change its properties</label>
</div>
<div class="option-row">
<div class="option">
<input id='btnChangeSetting' type='button' disabled={panelInfo.buttonDisable} value='Change Setting' onClick={() => { buttonClick() }} />
</div>
</div>
<div class="option-row">
<div class="option">
<input checked={panelInfo.showFirst} id='showFirst' type='checkbox' onChange={(e) => { showFirstChange(e) }} />
<label for="showFirst">showFirst</label>
</div>
<div class="option">
<input checked={panelInfo.showHigh} id='showHigh' type='checkbox' onChange={(e) => { showHighChange(e) }} />
<label for="showHigh">showHigh</label>
</div>
<div class="option">
<input id='showLast' type='checkbox' checked={panelInfo.showLast} onChange={(e) => { showLastChange(e) }} />
<label for="showLast">showLast</label>
</div>
<div class="option">
<input id='showLow' type='checkbox' checked={panelInfo.showLow} onChange={(e) => { showLowChange(e) }} />
<label for="showLow">showLow</label>
</div>
<div class="option">
<input id='showNegative' type='checkbox' checked={panelInfo.showNegative} onChange={(e) => { showNegativeChange(e) }} />
<label for="showNegative">showNegative</label>
</div>
<div class="option">
<input id='showMarkers' type='checkbox' checked={panelInfo.showMarkers} onChange={(e) => { showMarkersChange(e) }} />
<label for="showMarkers">showMarkers</label>
</div>
<div class="option">
<input id="displayXAxis" type="checkbox" checked={panelInfo.displayXAxis} onChange={(e) => { displayXAxisChange(e) }} />
<label for="displayXAxis">displayXAxis</label>
</div>
</div>
<div class="option-row">
<div class="option">
<label for="firstMarkerColor" class="block">First Marker Color</label>
<input id='firstMarkerColor' class="control" value={panelInfo.firstMarkerColor} onChange={(e) => { firstMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="sparklinetype" class="block">Type:</label>
<select id="sparklinetype" class="control" value={panelInfo.type} onChange={(e) => { typeChange(e) }}>
<option value="0">line</option>
<option value="1">column</option>
<option value="2">winloss</option>
</select>
</div>
<div class="option">
<label for="highMarkerColor" class="block">High Marker Color</label>
<input id='highMarkerColor' class="control" value={panelInfo.highMarkerColor} onChange={(e) => { highMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="lastMarkerColor" class="block">Last Marker Color</label>
<input id='lastMarkerColor' class="control" value={panelInfo.lastMarkerColor} onChange={(e) => { lastMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="lowMarkerColor" class="block">Low Marker Color</label>
<input id='lowMarkerColor' class="control" value={panelInfo.lowMarkerColor} onChange={(e) => { lowMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="negativeMarkerColor" class="block">Negative Marker Color</label>
<input id='negativeMarkerColor' class="control" value={panelInfo.negativeMarkerColor} onChange={(e) => { negativeMarkerColorChange(e) }} />
</div>
<div class="option">
<label for="markersColor" class="block">Markers Color</label>
<input id='markersColor' class="control" value={panelInfo.markersColor} onChange={(e) => { markersColorChange(e) }} />
</div>
<div class="option">
<label for="AxisColor" class="block">Axis Color</label>
<input id='AxisColor' class="control" value={panelInfo.axisColor} onChange={(e) => { axisColorChange(e) }} />
</div>
<div class="option">
<label for="SeriesColor" class="block">SeriesColor</label>
<input id='SeriesColor' class="control" value={panelInfo.seriesColor} onChange={(e) => { seriesColorChange(e) }} />
</div>
</div>
</div>
)
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option {
padding-bottom: 6px;
}
.block {
display: block;
padding: 6px 0;
}
.control {
padding: 4px 8px;
box-sizing: border-box;
width: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
