@lightningchart/lcjs-themes
Version:
Open-source Themes package for LightningChart JS
866 lines (863 loc) • 34.1 kB
JavaScript
import { ColorRGBA, SolidFill, RadialGradientFill, GradientExtent, GradientShape, SolidLine, FontSettings, TickStyle, emptyLine, emptyFill, NumericTickStrategy, emptyTick, DateTimeTickStrategy, TimeTickStrategy, DashedLine, StipplePatterns, LinearGradientFill, GlowEffect, transparentFill, PointShape, interpolateColor, PointStyle3D } from '@lightningchart/lcjs';
var colorMissing = ColorRGBA(0, 255, 0);
var StylePalette = function (array, clbk) {
var values = array.map(clbk);
return function (i) {
return values[i % values.length];
};
};
var clampNumber = function (num, a, b) {
var min = Math.min(a, b);
var max = Math.max(a, b);
return num > max ? max : num < min ? min : num;
};
var adjustColorBrightness = function (color, amt) {
return ColorRGBA(clampNumber(color.getR() + amt, 0, 255), clampNumber(color.getG() + amt, 0, 255), clampNumber(color.getB() + amt, 0, 255), color.getA());
};
/**
* Factory function for creating a LightningChart JS Theme based on very minimal configuration options.
*
* No-code interface for this factory can be found at https://arction.github.io/lcjs-themes/
*
* Pre-built versions generated using this factory can be found in this library:
*
* - `flatThemeDark` https://github.com/Arction/lcjs-themes/blob/main/src/flatThemeDark.ts
* - `flatThemeLight` https://github.com/Arction/lcjs-themes/blob/main/src/flatThemeLight.ts
*
* @param options - Configuration options for the created theme.
* @returns LightningChart JS `Theme` object.
*/
var makeCustomTheme = function (options) {
var _a, _b, _c, _d, _e, _f, _g, _h;
options.gradients = options.gradients !== undefined ? options.gradients : true;
options.effects = options.effects !== undefined ? options.effects : true;
var colorWhite = ColorRGBA(255, 255, 255);
var colorBlack = ColorRGBA(0, 0, 0);
var whiteFillStyle = new SolidFill({
color: colorWhite
});
var blackFillStyle = new SolidFill({
color: colorBlack
});
//
//
//
var isDark = options.isDark !== undefined ? options.isDark : true;
var labelShadow = options.isDark ? ColorRGBA(0, 0, 0, 255) : undefined;
var lcjsBackgroundFillStyle;
if (!options.gradients || !options.isDark) {
lcjsBackgroundFillStyle = new SolidFill({
color: options.backgroundColor
});
} else {
// Add some shading between darker and lighter bg.
lcjsBackgroundFillStyle = new RadialGradientFill({
position: {
x: 0.8,
y: 0.8
},
extent: GradientExtent.farthestCorner,
shape: GradientShape.ellipse,
stops: [{
offset: 0,
color: adjustColorBrightness(options.backgroundColor, 30)
}, {
offset: 0.5,
color: options.backgroundColor
}, {
offset: 1.0,
color: adjustColorBrightness(options.backgroundColor, -15)
}]
});
}
var highlightColorOffset = isDark ? ColorRGBA(60, 60, 60, 60) : ColorRGBA(-60, -60, -60, 60);
var highlightColorOffsetAxisOverlay = isDark ? ColorRGBA(255, 255, 255, 40) : ColorRGBA(0, 0, 0, 40);
var dashboardSplitterStyle = new SolidLine({
thickness: 4,
fillStyle: new SolidFill({
color: options.dashboardSplitterColor || colorMissing
})
});
var chartBackgroundFillStyle;
if (!options.gradients || !options.isDark) {
chartBackgroundFillStyle = transparentFill;
} else {
// Add highlight layer above charts
chartBackgroundFillStyle = new RadialGradientFill({
position: {
x: 0.5,
y: 0.5
},
extent: GradientExtent.farthestCorner,
shape: GradientShape.circle,
stops: [{
offset: 0,
color: ColorRGBA(120, 120, 120, 100)
}, {
offset: 1,
color: ColorRGBA(0, 0, 0, 50)
}]
});
}
var seriesBackgroundFillStyle = new SolidFill({
color: options.backgroundColor
});
var fontChartTitles = new FontSettings({
size: (_b = (_a = options.fontSize) === null || _a === void 0 ? void 0 : _a.chartTitle) !== null && _b !== void 0 ? _b : 18,
family: options.fontFamily,
weight: 'normal',
style: 'normal'
});
var fontAxisTitles = new FontSettings({
size: (_d = (_c = options.fontSize) === null || _c === void 0 ? void 0 : _c.axisTitle) !== null && _d !== void 0 ? _d : 16,
family: options.fontFamily,
weight: 'normal',
style: 'normal'
});
var fontLegendTitle = new FontSettings({
size: (_f = (_e = options.fontSize) === null || _e === void 0 ? void 0 : _e.legendTitle) !== null && _f !== void 0 ? _f : 14,
family: options.fontFamily,
weight: 'normal',
style: 'normal'
});
var fontOther = new FontSettings({
size: (_h = (_g = options.fontSize) === null || _g === void 0 ? void 0 : _g.other) !== null && _h !== void 0 ? _h : 14,
family: options.fontFamily,
weight: 'normal',
style: 'normal'
});
var textFillStyle = new SolidFill({
color: options.textColor
});
var uiTextFillStyleHidden = new SolidFill({
color: options.isDark ? ColorRGBA(70, 70, 70, 255) : ColorRGBA(170, 170, 170, 255)
});
var zoomRectangleFillStyle = new SolidFill({
color: isDark ? ColorRGBA(255, 255, 255, 20) : ColorRGBA(0, 0, 0, 20)
});
var zoomRectangleStrokeStyle = new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
});
var primaryDataFillStyle = new SolidFill({
color: options.dataColors[0]
});
var dataSolidFillPalette = StylePalette(options.dataColors, function (color) {
return new SolidFill({
color: color
});
});
var dataSolidLinePalette = StylePalette(options.dataColors, function (color) {
return new SolidLine({
fillStyle: new SolidFill({
color: color
}),
thickness: 2
});
});
var seriesStrokeStylePalette = dataSolidLinePalette;
var seriesFillStylePalette = dataSolidFillPalette;
var areaSeriesFillStylePaletteSolid = StylePalette(options.dataColors, function (color) {
return new SolidFill({
color: color.setA(100)
});
});
var areaSeriesFillStylePaletteGradientUp = StylePalette(options.dataColors, function (color) {
return new LinearGradientFill({
angle: 0,
stops: [{
offset: 0,
color: color.setA(0)
}, {
offset: 1,
color: color.setA(180)
}]
});
});
var dataBorderStrokePalette = dataSolidLinePalette;
var pointSeries3DPointStylePalette = StylePalette(options.dataColors, function (color) {
return new PointStyle3D.Triangulated({
shape: 'sphere',
size: 10,
fillStyle: new SolidFill({
color: color
})
});
});
var pointCloudSeries3DPointStylePalette = StylePalette(options.dataColors, function (color) {
return new PointStyle3D.Pixelated({
size: 5,
fillStyle: new SolidFill({
color: color
})
});
});
var dataFillStylePositive = new SolidFill({
color: ColorRGBA(176, 255, 157)
});
var dataFillStyleNegative = new SolidFill({
color: ColorRGBA(255, 112, 76)
});
var wireframeStyle = new SolidLine({
thickness: 1,
fillStyle: blackFillStyle
});
var axisStrokeStyle = new SolidLine({
thickness: 1,
fillStyle: new SolidFill({
color: options.axisColor
})
});
var axisOverlayStyle = new SolidFill({
color: ColorRGBA(0, 0, 0, 1)
}); // NOTE: Slight opaqueness is required for this overlay becoming visible when highlighted.
var tickStyleMajor = new TickStyle({
gridStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: new SolidFill({
color: options.gridLineColor
})
}),
tickStyle: emptyLine,
tickLength: 7,
tickPadding: 0,
labelFont: fontOther,
labelFillStyle: textFillStyle,
labelShadow: labelShadow
});
var tickStyleMinor = new TickStyle({
gridStrokeStyle: emptyLine,
tickStyle: emptyLine,
tickLength: 4,
tickPadding: 3,
labelFont: fontOther,
labelFillStyle: emptyFill,
labelShadow: labelShadow
});
var numericTickStrategy = new NumericTickStrategy({
extremeTickStyle: emptyTick,
majorTickStyle: tickStyleMajor,
minorTickStyle: tickStyleMinor
});
var dateTimeTickStrategy = new DateTimeTickStrategy({
greatTickStyle: emptyTick,
majorTickStyle: tickStyleMajor,
minorTickStyle: tickStyleMinor
});
var timeTickStrategy = new TimeTickStrategy({
majorTickStyle: tickStyleMajor,
minorTickStyle: tickStyleMinor
});
var cursorGridStrokeStyle = new DashedLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle,
pattern: StipplePatterns.DashedEqual,
patternScale: 3
});
var cursor3DGridStrokeStyle = new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
});
var bandFillStyle = zoomRectangleFillStyle;
var bandStrokeStyle = zoomRectangleStrokeStyle;
var constantLineStrokeStyle = new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
});
var uiButtonFillStyle = isDark ? whiteFillStyle : blackFillStyle;
var uiButtonFillStyleHidden = uiTextFillStyleHidden;
var uiBackgroundFillStyle;
if (!options.gradients || !options.isDark) {
uiBackgroundFillStyle = new SolidFill({
color: options.uiBackgroundColor
});
} else {
uiBackgroundFillStyle = new LinearGradientFill({
angle: 0,
stops: [{
offset: 0,
color: options.uiBackgroundColor
}, {
offset: 1,
color: adjustColorBrightness(options.uiBackgroundColor, 20)
}]
});
}
var uiBackgroundStrokeStyle = new SolidLine({
thickness: 1,
fillStyle: new SolidFill({
color: options.uiBorderColor
})
});
var effect;
var effectsText = false;
var effectsDashboardSplitters = false;
if (options.effects && options.isDark) {
effect = new GlowEffect({
spread: 1,
blur: 9,
offset: {
x: 0,
y: 0
},
color: options.backgroundColor.setA(150)
});
effectsText = true;
effectsDashboardSplitters = true;
} else if (options.effects && !options.isDark) {
effect = new GlowEffect({
spread: 0,
blur: 6,
offset: {
x: 2,
y: -2
},
color: ColorRGBA(0, 0, 0, 30)
});
effectsDashboardSplitters = true;
}
var pointSeriesStroke = new SolidLine({
thickness: 1,
fillStyle: options.isDark ? whiteFillStyle : blackFillStyle
});
var flatTheme = {
isDark: isDark,
effect: effect,
effectsText: effectsText,
effectsDashboardSplitters: effectsDashboardSplitters,
lcjsBackgroundFillStyle: lcjsBackgroundFillStyle,
lcjsBackgroundStrokeStyle: emptyLine,
highlightColorOffset: highlightColorOffset,
highlightColorOffsetAxisOverlay: highlightColorOffsetAxisOverlay,
dashboardSplitterStyle: dashboardSplitterStyle,
panelPadding: 7,
chartXYBackgroundFillStyle: chartBackgroundFillStyle,
chartXYBackgroundStrokeStyle: emptyLine,
chartXYTitleFont: fontChartTitles,
chartXYTitleFillStyle: textFillStyle,
chartXYTitleShadow: labelShadow,
chartXYSeriesBackgroundFillStyle: seriesBackgroundFillStyle,
chartXYSeriesBackgroundStrokeStyle: emptyLine,
chartXYZoomingRectangleFillStyle: zoomRectangleFillStyle,
chartXYZoomingRectangleStrokeStyle: zoomRectangleStrokeStyle,
chartXYTitleMargin: 5,
lineSeriesStrokeStyle: seriesStrokeStylePalette,
pointLineSeriesStrokeStyle: seriesStrokeStylePalette,
pointLineSeriesFillStyle: seriesFillStylePalette,
pointSeriesFillStyle: seriesFillStylePalette,
pointSeriesStrokeStyle: pointSeriesStroke,
ellipseSeriesFillStyle: seriesFillStylePalette,
ellipseSeriesStrokeStyle: seriesStrokeStylePalette,
polygonSeriesFillStyle: seriesFillStylePalette,
polygonSeriesStrokeStyle: seriesStrokeStylePalette,
rectangleSeriesFillStyle: seriesFillStylePalette,
rectangleSeriesStrokeStyle: emptyLine,
segmentSeriesStrokeStyle: seriesStrokeStylePalette,
boxSeriesBodyFillStyle: seriesFillStylePalette(0),
boxSeriesBodyStrokeStyle: emptyLine,
boxSeriesStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
}),
boxSeriesMedianStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: isDark ? blackFillStyle : whiteFillStyle
}),
ohlcCandleThicknessPixels: 5,
ohlcCandleBodyFillStylePositive: dataFillStylePositive,
ohlcCandleBodyFillStyleNegative: dataFillStyleNegative,
ohlcCandleTailStrokeStylePositive: new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
}),
ohlcCandleTailStrokeStyleNegative: new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
}),
ohlcBarThicknessPixels: 10,
ohlcBarStrokeStylePositive: new SolidLine({
thickness: 2,
fillStyle: dataFillStylePositive
}),
ohlcBarStrokeStyleNegative: new SolidLine({
thickness: 2,
fillStyle: dataFillStyleNegative
}),
heatmapGridSeriesFillStyle: seriesFillStylePalette,
heatmapGridSeriesWireframeStyle: wireframeStyle,
heatmapScrollingGridSeriesFillStyle: seriesFillStylePalette,
heatmapScrollingGridSeriesWireframeStyle: wireframeStyle,
areaRangeSeriesFillStyle: areaSeriesFillStylePaletteSolid,
areaRangeSeriesStrokeStyle: dataBorderStrokePalette,
areaRangeSeriesFillStyleInverted: areaSeriesFillStylePaletteSolid,
areaRangeSeriesStrokeStyleInverted: dataBorderStrokePalette,
areaSeriesBipolarHighFillStyle: areaSeriesFillStylePaletteSolid,
areaSeriesBipolarHighStrokeStyle: dataBorderStrokePalette,
areaSeriesBipolarLowFillStyle: areaSeriesFillStylePaletteSolid,
areaSeriesBipolarLowStrokeStyle: dataBorderStrokePalette,
areaSeriesPositiveFillStyle: areaSeriesFillStylePaletteGradientUp,
areaSeriesPositiveStrokeStyle: dataBorderStrokePalette,
areaSeriesNegativeFillStyle: areaSeriesFillStylePaletteSolid,
areaSeriesNegativeStrokeStyle: dataBorderStrokePalette,
xAxisTitleFont: fontAxisTitles,
xAxisTitleFillStyle: textFillStyle,
xAxisStrokeStyle: axisStrokeStyle,
xAxisOverlayStyle: axisOverlayStyle,
xAxisZoomingBandFillStyle: zoomRectangleFillStyle,
xAxisZoomingBandStrokeStyle: emptyLine,
xAxisNumericTicks: numericTickStrategy,
xAxisDateTimeTicks: dateTimeTickStrategy,
xAxisTimeTicks: timeTickStrategy,
yAxisTitleFont: fontAxisTitles,
yAxisTitleFillStyle: textFillStyle,
yAxisStrokeStyle: axisStrokeStyle,
yAxisOverlayStyle: axisOverlayStyle,
yAxisZoomingBandFillStyle: zoomRectangleFillStyle,
yAxisZoomingBandStrokeStyle: emptyLine,
yAxisNumericTicks: numericTickStrategy,
yAxisDateTimeTicks: dateTimeTickStrategy,
yAxisTimeTicks: timeTickStrategy,
bandFillStyle: bandFillStyle,
bandStrokeStyle: bandStrokeStyle,
constantLineStrokeStyle: constantLineStrokeStyle,
barChartBackgroundFillStyle: chartBackgroundFillStyle,
barChartBackgroundStrokeStyle: emptyLine,
barChartTitleFont: fontChartTitles,
barChartTitleFillStyle: textFillStyle,
barChartTitleShadow: labelShadow,
barChartSeriesBackgroundFillStyle: transparentFill,
barChartSeriesBackgroundStrokeStyle: emptyLine,
barChartBarFillStyle: seriesFillStylePalette,
barChartBarStrokeStyle: emptyLine,
barChartValueAxisTitleFont: fontAxisTitles,
barChartValueAxisTitleFillStyle: textFillStyle,
barChartValueAxisStrokeStyle: axisStrokeStyle,
barChartValueAxisTicks: numericTickStrategy.setMajorTickStyle(function (major) {
return major.setGridStrokeStyle(emptyLine);
}).setMinorTickStyle(function (minor) {
return minor.setGridStrokeStyle(emptyLine);
}),
barChartCategoryAxisTitleFont: fontAxisTitles,
barChartCategoryAxisTitleFillStyle: textFillStyle,
barChartCategoryAxisStrokeStyle: axisStrokeStyle,
barChartCategoryLabels: {
formatter: function (category, categoryValuesTotal) {
return category;
},
labelFillStyle: numericTickStrategy.majorTickStyle.labelFillStyle,
labelFont: numericTickStrategy.majorTickStyle.labelFont,
labelMargin: 8,
tickStyle: numericTickStrategy.majorTickStyle.tickStyle,
tickLength: 0,
labelRotation: 0,
labelShadow: labelShadow
},
barChartValueLabelsAfterBars: {
position: 'after-bar',
formatter: function (info) {
return info.chart.valueAxis.formatValue(info.value);
},
labelFillStyle: numericTickStrategy.majorTickStyle.labelFillStyle,
labelFont: numericTickStrategy.majorTickStyle.labelFont,
labelMargin: 8,
labelRotation: 0,
displayStackedSum: true,
displayStackedIndividuals: false,
labelShadow: labelShadow
},
barChartValueLabelsInsideBars: {
position: 'inside-bar',
formatter: function (info) {
return info.chart.valueAxis.formatValue(info.value);
},
labelFillStyle: isDark ? whiteFillStyle : blackFillStyle,
labelFont: numericTickStrategy.majorTickStyle.labelFont,
labelMargin: 8,
labelRotation: 0,
displayStackedSum: true,
displayStackedIndividuals: false,
labelShadow: labelShadow
},
barChartCornerRadius: 10,
chart3DBackgroundFillStyle: chartBackgroundFillStyle,
chart3DBackgroundStrokeStyle: emptyLine,
chart3DTitleFont: fontChartTitles,
chart3DTitleFillStyle: textFillStyle,
chart3DTitleShadow: labelShadow,
chart3DSeriesBackgroundFillStyle: seriesBackgroundFillStyle,
chart3DSeriesBackgroundStrokeStyle: emptyLine,
chart3DBoundingBoxStrokeStyle: emptyLine,
xAxis3DTitleFont: fontAxisTitles,
xAxis3DTitleFillStyle: textFillStyle,
xAxis3DStrokeStyle: axisStrokeStyle,
xAxis3DNumericTicks: numericTickStrategy,
xAxis3DDateTimeTicks: dateTimeTickStrategy,
xAxis3DTimeTicks: timeTickStrategy,
yAxis3DTitleFont: fontAxisTitles,
yAxis3DTitleFillStyle: textFillStyle,
yAxis3DStrokeStyle: axisStrokeStyle,
yAxis3DNumericTicks: numericTickStrategy,
yAxis3DDateTimeTicks: dateTimeTickStrategy,
yAxis3DTimeTicks: timeTickStrategy,
zAxis3DTitleFont: fontAxisTitles,
zAxis3DTitleFillStyle: textFillStyle,
zAxis3DStrokeStyle: axisStrokeStyle,
zAxis3DNumericTicks: numericTickStrategy,
zAxis3DDateTimeTicks: dateTimeTickStrategy,
zAxis3DTimeTicks: timeTickStrategy,
lineSeries3DStrokeStyle: seriesStrokeStylePalette,
pointLineSeries3DStrokeStyle: seriesStrokeStylePalette,
pointLineSeries3DPointStyle: pointSeries3DPointStylePalette,
pointSeries3DPointStyle: pointSeries3DPointStylePalette,
pointCloudSeries3DPointStyle: pointCloudSeries3DPointStylePalette,
surfaceGridSeries3DFillStyle: seriesFillStylePalette,
surfaceGridSeries3DWireframeStyle: wireframeStyle,
surfaceScrollingGridSeries3DFillStyle: seriesFillStylePalette,
surfaceScrollingGridSeries3DWireframeStyle: wireframeStyle,
boxSeries3DFillStyle: seriesFillStylePalette,
polarChartBackgroundFillStyle: chartBackgroundFillStyle,
polarChartBackgroundStrokeStyle: emptyLine,
polarChartTitleFont: fontChartTitles,
polarChartTitleFillStyle: textFillStyle,
polarChartTitleShadow: labelShadow,
polarChartSeriesBackgroundFillStyle: seriesBackgroundFillStyle,
polarChartSeriesBackgroundStrokeStyle: emptyLine,
polarSectorFillStyle: bandFillStyle,
polarSectorStrokeStyle: bandStrokeStyle,
polarAmplitudeAxisTitleFont: fontAxisTitles,
polarAmplitudeAxisTitleFillStyle: textFillStyle,
polarAmplitudeAxisTitleShadow: labelShadow,
polarAmplitudeAxisStrokeStyle: axisStrokeStyle,
polarAmplitudeAxisNumericTicks: numericTickStrategy,
polarAmplitudeAxisDateTimeTicks: dateTimeTickStrategy,
polarAmplitudeAxisTimeTicks: timeTickStrategy,
polarRadialAxisTitleFont: fontAxisTitles,
polarRadialAxisTitleFillStyle: textFillStyle,
polarRadialAxisStrokeStyle: axisStrokeStyle,
polarRadialAxisTickStyle: tickStyleMajor,
polarRadialAxisMarginAfterTicks: 0,
polarLineSeriesStrokeStyle: seriesStrokeStylePalette,
polarPointLineSeriesFillStyle: seriesFillStylePalette,
polarPointLineSeriesStrokeStyle: seriesStrokeStylePalette,
polarPointSeriesFillStyle: seriesFillStylePalette,
polarPointSeriesStrokeStyle: pointSeriesStroke,
polarPolygonSeriesFillStyle: areaSeriesFillStylePaletteSolid,
polarPolygonSeriesStrokeStyle: dataBorderStrokePalette,
polarAreaSeriesFillStyle: areaSeriesFillStylePaletteSolid,
polarAreaSeriesStrokeStyle: dataBorderStrokePalette,
polarHeatmapSeriesFillStyle: seriesFillStylePalette,
zoomBandChartDefocusOverlayFillStyle: new SolidFill({
color: options.isDark ? ColorRGBA(0, 0, 0, 180) : ColorRGBA(255, 255, 255, 180)
}),
zoomBandChartSplitterStrokeStyle: new SolidLine({
thickness: 2,
fillStyle: options.isDark ? whiteFillStyle : blackFillStyle
}),
zoomBandChartKnobSize: {
x: 11,
y: 19
},
zoomBandChartKnobFillStyle: options.isDark ? whiteFillStyle : blackFillStyle,
mapChartBackgroundFillStyle: chartBackgroundFillStyle,
mapChartBackgroundStrokeStyle: emptyLine,
mapChartTitleFont: fontChartTitles,
mapChartTitleFillStyle: textFillStyle,
mapChartTitleShadow: labelShadow,
mapChartFillStyle: primaryDataFillStyle,
mapChartStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: blackFillStyle
}),
mapChartOutlierRegionFillStyle: emptyFill,
mapChartOutlierRegionStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: isDark ? whiteFillStyle : blackFillStyle
}),
mapChartSeparateRegionFillStyle: uiBackgroundFillStyle,
mapChartSeparateRegionStrokeStyle: uiBackgroundStrokeStyle,
dataGridBackgroundFillStyle: chartBackgroundFillStyle,
dataGridBackgroundStrokeStyle: emptyLine,
dataGridTitleFont: fontChartTitles,
dataGridTitleFillStyle: textFillStyle,
dataGridTitleShadow: labelShadow,
dataGridTextShadow: labelShadow,
dataGridTextFont: fontOther,
dataGridTextFillStyle: textFillStyle,
dataGridCellBackgroundFillStyle: seriesBackgroundFillStyle,
dataGridBorderStrokeStyle: uiBackgroundStrokeStyle,
dataGridScrollBarBackgroundFillStyle: new SolidFill({
color: ColorRGBA(30, 30, 30)
}),
dataGridScrollBarBackgroundStrokeStyle: emptyLine,
dataGridScrollBarFillStyle: new SolidFill({
color: ColorRGBA(30, 30, 30)
}),
dataGridScrollBarStrokeStyle: uiBackgroundStrokeStyle,
dataGridScrollBarButtonFillStyle: new SolidFill({
color: ColorRGBA(30, 30, 30)
}),
dataGridScrollBarButtonStrokeStyle: uiBackgroundStrokeStyle,
dataGridScrollBarButtonArrowFillStyle: uiButtonFillStyle,
dataGridScrollBarThickness: 20,
dataGridCellPadding: 5,
textSeriesShadow: labelShadow,
sparkLineChartStrokeStyle: seriesStrokeStylePalette(0),
sparkPointChartFillStyle: seriesFillStylePalette(0),
sparkBarChartFillStyle: seriesFillStylePalette(0),
sparkBarChartStrokeStyle: dataBorderStrokePalette(0),
sparkAreaChartFillStyle: areaSeriesFillStylePaletteGradientUp(0),
sparkAreaChartStrokeStyle: dataBorderStrokePalette(0),
sparkPieChartFillStyle: seriesFillStylePalette,
sparkPieChartStrokeStyle: uiBackgroundStrokeStyle,
sparkChartBandFillStyle: bandFillStyle,
sparkChartBandStrokeStyle: bandStrokeStyle,
sparkChartConstantLineStrokeStyle: constantLineStrokeStyle,
spiderChartBackgroundFillStyle: chartBackgroundFillStyle,
spiderChartBackgroundStrokeStyle: emptyLine,
spiderChartTitleFont: fontChartTitles,
spiderChartTitleFillStyle: textFillStyle,
spiderChartTitleShadow: labelShadow,
spiderChartSeriesBackgroundFillStyle: seriesBackgroundFillStyle,
spiderChartSeriesBackgroundStrokeStyle: emptyLine,
spiderChartWebStyle: tickStyleMajor.gridStrokeStyle,
spiderChartScaleLabelFillStyle: textFillStyle,
spiderChartScaleLabelFont: fontOther,
spiderChartAxisLabelFillStyle: textFillStyle,
spiderChartAxisLabelFont: fontAxisTitles,
spiderChartAxisStrokeStyle: axisStrokeStyle,
spiderChartAxisNibStrokeStyle: emptyLine,
spiderSeriesFillStyle: areaSeriesFillStylePaletteSolid,
spiderSeriesStrokeStyle: dataBorderStrokePalette,
spiderSeriesPointFillStyle: seriesFillStylePalette,
spiderChartScaleLabelShadow: labelShadow,
pieChartBackgroundFillStyle: chartBackgroundFillStyle,
pieChartBackgroundStrokeStyle: emptyLine,
pieChartTitleFont: fontAxisTitles,
pieChartTitleFillStyle: textFillStyle,
pieChartTitleShadow: labelShadow,
pieChartSliceFillStylePalette: seriesFillStylePalette,
pieChartSliceStrokeStyle: uiBackgroundStrokeStyle,
pieChartSliceLabelFont: fontOther,
pieChartSliceLabelFillStyle: textFillStyle,
pieChartConnectorStrokeStyle: uiBackgroundStrokeStyle,
pieChartSliceLabelShadow: labelShadow,
funnelChartBackgroundFillStyle: chartBackgroundFillStyle,
funnelChartBackgroundStrokeStyle: emptyLine,
funnelChartTitleFont: fontChartTitles,
funnelChartTitleFillStyle: textFillStyle,
funnelChartTitleShadow: labelShadow,
funnelChartSliceFillStylePalette: seriesFillStylePalette,
funnelChartSliceStrokeStyle: uiBackgroundStrokeStyle,
funnelChartSliceLabelFont: fontOther,
funnelChartSliceLabelFillStyle: textFillStyle,
funnelChartConnectorStrokeStyle: uiBackgroundStrokeStyle,
funnelChartSliceLabelShadow: labelShadow,
pyramidChartBackgroundFillStyle: chartBackgroundFillStyle,
pyramidChartBackgroundStrokeStyle: emptyLine,
pyramidChartTitleFont: fontChartTitles,
pyramidChartTitleFillStyle: textFillStyle,
pyramidChartTitleShadow: labelShadow,
pyramidChartSliceFillStylePalette: seriesFillStylePalette,
pyramidChartSliceStrokeStyle: uiBackgroundStrokeStyle,
pyramidChartSliceLabelFont: fontOther,
pyramidChartSliceLabelFillStyle: textFillStyle,
pyramidChartConnectorStrokeStyle: uiBackgroundStrokeStyle,
pyramidChartSliceLabelShadow: labelShadow,
gaugeChartValueLabelFont: fontOther.setSize(60),
gaugeChartUnitLabelFont: fontOther.setSize(40),
gaugeChartTickFont: fontOther.setSize(30),
gaugeChartBarThickness: 40,
gaugeChartValueIndicatorThickness: 10,
gaugeChartRoundedEdges: true,
gaugeChartNeedleLength: 40,
gaugeChartStartAngle: 225,
gaugeChartEndAngle: -45,
gaugeChartNeedleAlignment: 0,
gaugeChartGapBetweenBarAndValueIndicators: 10,
gaugeChartTickFillStyle: textFillStyle,
gaugeChartBarGradient: true,
gaugeChartBarStrokeStyle: emptyLine,
gaugeChartUnitLabelFillStyle: textFillStyle,
gaugeChartValueLabelFillStyle: textFillStyle,
gaugeChartBarColor: options.dataColors[0],
gaugeChartGlowColor: ColorRGBA(255, 255, 255, 64),
gaugeChartNeedleFillStyle: new SolidFill({
color: ColorRGBA(255, 255, 255)
}),
gaugeChartNeedleThickness: 10,
gaugeChartNeedleStrokeStyle: new SolidLine({
thickness: 2,
fillStyle: new SolidFill({
color: ColorRGBA(0, 0, 0)
})
}),
gaugeChartBackgroundFillStyle: chartBackgroundFillStyle,
gaugeChartBackgroundStrokeStyle: emptyLine,
gaugeChartTitleFont: fontChartTitles,
gaugeChartTitleFillStyle: textFillStyle,
gaugeChartTitleShadow: labelShadow,
treeMapChartBackgroundFillStyle: chartBackgroundFillStyle,
treeMapChartBackgroundStrokeStyle: emptyLine,
treeMapChartParentColor: isDark ? ColorRGBA(24, 30, 33) : ColorRGBA(217, 217, 217),
treeMapChartNodeColors: options.dataColors.map(function (color) {
return color.setA(125);
}),
treeMapChartNodeStrokeStyle: new SolidLine({
thickness: 1,
fillStyle: new SolidFill({
color: ColorRGBA(0, 0, 0)
})
}),
treeMapChartTitleFillStyle: textFillStyle,
treeMapChartTitleShadow: labelShadow,
treeMapChartTitleFont: fontChartTitles,
treeMapChartPathLabelFillStyle: textFillStyle,
treeMapChartPathLabelFont: fontOther,
treeMapChartLabelHeaderFillStyle: textFillStyle,
treeMapChartLabelHeaderFont: fontOther.setWeight('bold'),
treeMapChartLabelFillStyle: textFillStyle,
treeMapChartLabelFont: fontOther,
treeMapChartCornerRadius: 8,
uiPanelBackgroundFillStyle: chartBackgroundFillStyle,
uiPanelBackgroundStrokeStyle: emptyLine,
onScreenMenuBackgroundColor: ColorRGBA(254, 204, 0, 0.7),
parallelCoordinateChartBackgroundFillStyle: chartBackgroundFillStyle,
parallelCoordinateChartBackgroundStrokeStyle: emptyLine,
parallelCoordinateChartTitleFont: fontChartTitles,
parallelCoordinateChartTitleFillStyle: textFillStyle,
parallelCoordinateChartTitleShadow: labelShadow,
parallelCoordinateChartSeriesBackgroundFillStyle: seriesBackgroundFillStyle,
parallelCoordinateChartSeriesBackgroundStrokeStyle: emptyLine,
parallelCoordinateChartSeriesColor: StylePalette(options.dataColors, function (color) {
return color;
}),
parallelCoordinateChartSeriesColorUnselected: isDark ? ColorRGBA(255, 255, 255, 40) : ColorRGBA(0, 0, 0, 40),
parallelCoordinateChartSeriesLineThickness: 2,
parallelCoordinateAxisTitleFont: fontAxisTitles,
parallelCoordinateAxisTitleFillStyle: textFillStyle,
parallelCoordinateAxisNumericTicks: numericTickStrategy,
parallelCoordinateAxisDateTimeTicks: dateTimeTickStrategy,
parallelCoordinateAxisTimeTicks: timeTickStrategy,
parallelCoordinateAxisStrokeStyle: axisStrokeStyle,
parallelCoordinateAxisRangeSelectorFillStyle: uiBackgroundFillStyle,
parallelCoordinateAxisRangeSelectorStrokeStyle: uiBackgroundStrokeStyle,
parallelCoordinateChartPointedSeriesLineStyle: seriesStrokeStylePalette(0),
parallelCoordinateAxisBackgroundFillStyle: new LinearGradientFill({
angle: 90,
stops: [{
offset: 0.0,
color: options.isDark ? ColorRGBA(0, 0, 0, 0) : ColorRGBA(255, 255, 255, 0)
}, {
offset: 1.0,
color: options.isDark ? ColorRGBA(0, 0, 0, 255) : ColorRGBA(255, 255, 255, 180)
}]
}),
uiButtonFillStyle: uiButtonFillStyle,
uiButtonFillStyleHidden: uiButtonFillStyleHidden,
uiButtonStrokeStyle: options.isDark ? emptyLine : new SolidLine({
thickness: 1,
fillStyle: new SolidFill({
color: colorBlack
})
}),
uiButtonSize: 10,
uiBackgroundFillStyle: uiBackgroundFillStyle,
uiBackgroundStrokeStyle: uiBackgroundStrokeStyle,
uiTextFillStyle: textFillStyle,
uiTextFillStyleHidden: uiTextFillStyleHidden,
uiTextFont: fontOther,
uiTextPadding: 5,
legendTitleFillStyle: textFillStyle,
legendTitleFont: fontLegendTitle,
legendBorderRadius: 8,
legendPadding: 5,
legendLUTLabelMargin: 7,
legendLUTUnitLabelMargin: 7,
legendLUTLengthHorizontal: 160,
legendLUTThicknessHorizontal: 15,
legendLUTLengthVertical: 140,
legendLUTThicknessVertical: 25,
cursorTickMarkerXBackgroundFillStyle: uiBackgroundFillStyle,
cursorTickMarkerXBackgroundStrokeStyle: uiBackgroundStrokeStyle,
cursorTickMarkerXTextFillStyle: textFillStyle,
cursorTickMarkerXTextFont: fontOther,
cursorTickMarkerYBackgroundFillStyle: uiBackgroundFillStyle,
cursorTickMarkerYBackgroundStrokeStyle: uiBackgroundStrokeStyle,
cursorTickMarkerYTextFillStyle: textFillStyle,
cursorTickMarkerYTextFont: fontOther,
cursorPointMarkerSize: {
x: 9,
y: 9
},
cursorPointMarkerShape: PointShape.Circle,
cursorResultTableFillStyle: uiBackgroundFillStyle,
cursorResultTableStrokeStyle: uiBackgroundStrokeStyle,
cursorResultTableTextFillStyle: textFillStyle,
cursorResultTableTextFont: fontOther,
cursorResultTableHeaderBackgroundFillStyle: undefined,
cursorResultTableBorderRadius: 5,
cursorPointMarkerFillStyle: emptyFill,
cursorPointMarkerStrokeStyle: emptyLine,
cursorDynamicBehavior: {
pointMarkerFill: function (dataColor) {
return new SolidFill({
color: interpolateColor(dataColor, options.isDark ? colorBlack : colorWhite, 0.2, 230)
});
},
pointMarkerStroke: function (dataColor) {
return new SolidLine({
thickness: 2,
fillStyle: new SolidFill({
color: interpolateColor(dataColor, options.isDark ? colorWhite : colorBlack, options.isDark ? 0.8 : 0.6, 204)
})
});
},
pointMarkerSize: function (dataPointSize) {
return {
x: dataPointSize + 3,
y: dataPointSize + 3
};
}
},
cursorGridStrokeStyleX: cursorGridStrokeStyle,
cursorGridStrokeStyleY: cursorGridStrokeStyle,
cursor3DGridStrokeStyleX: cursor3DGridStrokeStyle,
cursor3DGridStrokeStyleY: cursor3DGridStrokeStyle,
cursor3DGridStrokeStyleZ: cursor3DGridStrokeStyle,
cursor3DTickStrokeStyleX: tickStyleMajor.tickStyle,
cursor3DTickStrokeStyleY: tickStyleMajor.tickStyle,
cursor3DTickStrokeStyleZ: tickStyleMajor.tickStyle,
cursor3DTickLabelFillStyleX: textFillStyle,
cursor3DTickLabelFillStyleY: textFillStyle,
cursor3DTickLabelFillStyleZ: textFillStyle,
cursor3DTickLabelFontX: fontOther,
cursor3DTickLabelFontY: fontOther,
cursor3DTickLabelFontZ: fontOther,
cursor3DTickLabelBackgroundFillStyleX: uiBackgroundFillStyle,
cursor3DTickLabelBackgroundFillStyleY: uiBackgroundFillStyle,
cursor3DTickLabelBackgroundFillStyleZ: uiBackgroundFillStyle,
cursor3DTickLabelBackgroundStrokeStyleX: uiBackgroundStrokeStyle,
cursor3DTickLabelBackgroundStrokeStyleY: uiBackgroundStrokeStyle,
cursor3DTickLabelBackgroundStrokeStyleZ: uiBackgroundStrokeStyle,
cursor3DTickLabelPaddingX: {
left: 4,
right: 4,
top: 4,
bottom: 4
},
cursor3DTickLabelPaddingY: {
left: 4,
right: 4,
top: 4,
bottom: 4
},
cursor3DTickLabelPaddingZ: {
left: 4,
right: 4,
top: 4,
bottom: 4
}
};
return flatTheme;
};
export { makeCustomTheme };