juijs-chart
Version:
SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D)
411 lines (389 loc) • 17.2 kB
JavaScript
export default {
name: "chart.theme.dark",
extend: null,
component: function () {
var themeColors = [
"#12f2e8",
"#26f67c",
"#e9f819",
"#b78bf9",
"#f94590",
"#8bccf9",
"#9228e4",
"#06d9b6",
"#fc6d65",
"#f199ff",
"#c8f21d",
"#16a6e5",
"#00ba60",
"#91f2a1",
"#fc9765",
"#f21d4f"
];
return {
fontFamily : "arial,Tahoma,verdana",
backgroundColor : "#222222",
colors : themeColors,
// Axis styles
axisBackgroundColor : "#222222",
axisBackgroundOpacity : 0,
axisBorderColor : "#222222",
axisBorderWidth : 0,
axisBorderRadius : 0,
// Grid styles
gridXFontSize : 11,
gridYFontSize : 11,
gridZFontSize : 10,
gridCFontSize : 11,
gridXFontColor : "#868686",
gridYFontColor : "#868686",
gridZFontColor : "#868686",
gridCFontColor : "#868686",
gridXFontWeight : "normal",
gridYFontWeight : "normal",
gridZFontWeight : "normal",
gridCFontWeight : "normal",
gridXAxisBorderColor : "#464646",
gridYAxisBorderColor : "#464646",
gridZAxisBorderColor : "#464646",
gridXAxisBorderWidth : 2,
gridYAxisBorderWidth : 2,
gridZAxisBorderWidth : 2,
// Full 3D 전용 테마
gridFaceBackgroundColor: "#dcdcdc",
gridFaceBackgroundOpacity: 0.3,
gridActiveFontColor : "#ff762d",
gridActiveBorderColor : "#ff7800",
gridActiveBorderWidth : 1,
gridPatternColor : "#ababab",
gridPatternOpacity : 0.1,
gridBorderColor : "#868686",
gridBorderWidth : 1,
gridBorderDashArray : "none",
gridBorderOpacity : 1,
gridTickBorderSize : 3,
gridTickBorderWidth : 1.5,
gridTickPadding : 5,
// Brush styles
tooltipPointRadius : 5, // common
tooltipPointBorderWidth : 1, // common
tooltipPointFontWeight : "bold", // common
tooltipPointFontSize : 11,
tooltipPointFontColor : "#868686",
barFontSize : 11,
barFontColor : "#868686",
barBorderColor : "none",
barBorderWidth : 0,
barBorderOpacity : 0,
barBorderRadius : 3,
barActiveBackgroundColor : "#fc6d65",
barPointBorderColor : "#fff",
barDisableBackgroundOpacity : 0.4,
barStackEdgeBorderWidth : 1,
rateBarFontSize : 11,
rateBarFontColor : "#868686",
rateBarBorderColor : "none",
rateBarBorderWidth : 0,
rateBarBorderOpacity : 0,
rateBarBorderRadius : 5,
rateBarDisableBackgroundOpacity : 0.7,
rateBarTooltipFontSize: 10,
rateBarTooltipFontColor: "#868686",
rateBarTooltipBackgroundColor: "#222",
rateBarTooltipBorderColor: "#666666",
gaugeBackgroundColor : "#3e3e3e",
gaugeArrowColor : "#a6a6a6",
gaugeFontColor : "#c5c5c5",
gaugeFontSize : 20,
gaugeFontWeight : "bold",
gaugeTitleFontSize : 12,
gaugeTitleFontWeight : "normal",
gaugeTitleFontColor : "#c5c5c5",
gaugePaddingAngle : 2,
bargaugeBackgroundColor : "#3e3e3e",
bargaugeFontSize : 11,
bargaugeFontColor : "#c5c5c5",
pieBorderColor : "#232323",
pieBorderWidth : 1,
pieOuterFontSize : 11,
pieOuterFontColor : "#868686",
pieOuterLineColor : "#a9a9a9",
pieOuterLineSize : 8,
pieOuterLineRate : 1.3,
pieOuterLineWidth : 0.7,
pieInnerFontSize : 11,
pieInnerFontColor : "#868686",
pieActiveDistance : 5,
pieNoDataBackgroundColor : "#E9E9E9",
pieTotalValueFontSize : 36,
pieTotalValueFontColor : "#dcdcdc",
pieTotalValueFontWeight : "bold",
pieDisableBackgroundOpacity: 0.5,
areaBackgroundOpacity : 0.5,
areaSplitBackgroundColor : "#ebebeb",
bubbleBackgroundOpacity : 0.5,
bubbleBorderWidth : 1,
bubbleFontSize : 12,
bubbleFontColor : "#868686",
candlestickBorderColor : "#14be9d",
candlestickBackgroundColor : "#14be9d",
candlestickInvertBorderColor : "#ff4848",
candlestickInvertBackgroundColor : "#ff4848",
ohlcBorderColor : "#14be9d",
ohlcInvertBorderColor : "#ff4848",
ohlcBorderRadius : 5,
lineBorderWidth : 2,
lineBorderDashArray : "none",
lineBorderOpacity : 1,
lineDisableBorderOpacity : 0.3,
linePointBorderColor : "#fff",
lineSplitBorderColor : null,
lineSplitBorderOpacity : 0.5,
pathBackgroundOpacity : 0.2,
pathBorderWidth : 1,
scatterBorderColor : "none",
scatterBorderWidth : 1,
scatterHoverColor : "#222222",
waterfallBackgroundColor : "#26f67c",
waterfallInvertBackgroundColor : "#f94590",
waterfallEdgeBackgroundColor : "#8bccf9",
waterfallLineColor : "#a9a9a9",
waterfallLineDashArray : "0.9",
focusBorderColor : "#FF7800",
focusBorderWidth : 1,
focusBackgroundColor : "#FF7800",
focusBackgroundOpacity : 0.1,
pinFontColor : "#FF7800",
pinFontSize : 10,
pinBorderColor : "#FF7800",
pinBorderWidth : 0.7,
topologyNodeRadius : 12.5,
topologyNodeFontSize : 14,
topologyNodeFontColor : "#c5c5c5",
topologyNodeTitleFontSize : 11,
topologyNodeTitleFontColor : "#c5c5c5",
topologyEdgeWidth : 1,
topologyActiveEdgeWidth : 2,
topologyHoverEdgeWidth : 2,
topologyEdgeColor : "#b2b2b2",
topologyActiveEdgeColor : "#905ed1",
topologyHoverEdgeColor : "#d3bdeb",
topologyEdgeFontSize : 10,
topologyEdgeFontColor : "#c5c5c5",
topologyEdgePointRadius : 3,
topologyEdgeOpacity : 1,
topologyTooltipBackgroundColor : "#222222",
topologyTooltipBorderColor : "#ccc",
topologyTooltipFontSize : 11,
topologyTooltipFontColor : "#c5c5c5",
timelineTitleFontSize: 11,
timelineTitleFontColor: "#d5d5d5",
timelineTitleFontWeight: 700,
timelineColumnFontSize: 10,
timelineColumnFontColor: "#d5d5d5",
timelineColumnBackgroundColor: "#1c1c1c",
timelineHoverRowBackgroundColor: "#2f2f2f",
timelineEvenRowBackgroundColor: "#202020",
timelineOddRowBackgroundColor: "#1c1c1c",
timelineActiveBarBackgroundColor: "#6f32ba",
timelineActiveBarFontColor: "#fff",
timelineActiveBarFontSize: 9,
timelineHoverBarBackgroundColor: null,
timelineLayerBackgroundOpacity: 0.1,
timelineActiveLayerBackgroundColor: "#7F5FA4",
timelineActiveLayerBorderColor: "#7f5fa4",
timelineHoverLayerBackgroundColor: "#7F5FA4",
timelineHoverLayerBorderColor: "#7f5fa4",
timelineVerticalLineColor: "#2f2f2f",
timelineHorizontalLineColor: "#4d4d4d",
// hudColumnGridPointRadius: 7,
// hudColumnGridPointBorderColor: "#868686",
// hudColumnGridPointBorderWidth: 2,
// hudColumnGridFontColor: "#868686",
// hudColumnGridFontSize: 12,
// hudColumnGridFontWeight: "normal",
// hudColumnLeftBackgroundColor: "#3C3C3C",
// hudColumnRightBackgroundColor: "#838383",
// hudBarGridFontColor: "#868686",
// hudBarGridFontSize: 16,
// hudBarGridLineColor: "#868686",
// hudBarGridLineWidth: 1,
// hudBarGridLineOpacity: 0.8,
// hudBarGridBackgroundColor: "#868686",
// hudBarGridBackgroundOpacity: 0.5,
// hudBarTextLineColor: "#B2A6A6",
// hudBarTextLineWidth: 1.5,
// hudBarTextLinePadding: 12,
// hudBarTextLineFontColor: "#868686",
// hudBarTextLineFontSize: 13,
// hudBarBackgroundOpacity: 0.6,
// hudBarTopBackgroundColor: "#bbb",
// hudBarBottomBackgroundColor: "#3C3C3C",
heatmapBackgroundColor: "#222222",
heatmapBackgroundOpacity: 1,
heatmapHoverBackgroundOpacity: 0.2,
heatmapBorderColor: "#fff",
heatmapBorderWidth: 0.5,
heatmapBorderOpacity: 1,
heatmapFontSize: 11,
heatmapFontColor: "#868686",
pyramidLineColor: "#464646",
pyramidLineWidth: 1,
pyramidTextLineColor: "#B2A6A6",
pyramidTextLineWidth: 1,
pyramidTextLineSize: 30,
pyramidTextFontSize: 10,
pyramidTextFontColor: "#222",
heatmapscatterBorderWidth: 0.5,
heatmapscatterBorderColor: "#222222",
heatmapscatterActiveBackgroundColor: "#222222",
treemapNodeBorderWidth: 0.5,
treemapNodeBorderColor: "#222222",
treemapTextFontSize: 11,
treemapTextFontColor: "#868686",
treemapTitleFontSize: 12,
treemapTitleFontColor: "#868686",
arcEqualizerBorderColor: "#222222",
arcEqualizerBorderWidth: 1,
arcEqualizerFontSize: 13,
arcEqualizerFontColor: "#868686",
arcEqualizerBackgroundColor: "#222222",
flameNodeBorderWidth: 0.5,
flameNodeBorderColor: "#222",
flameDisableBackgroundOpacity: 0.4,
flameTextFontSize: 12,
flameTextFontColor: "#868686",
selectBoxBackgroundColor: "#fff",
selectBoxBackgroundOpacity: 0.1,
selectBoxBorderColor: "#fff",
selectBoxBorderOpacity: 0.2,
// widget styles
titleFontColor : "#ffffff",
titleFontSize : 14,
titleFontWeight : "normal",
legendFontColor : "#ffffff",
legendFontSize : 11,
legendSwitchCircleColor : "#fff",
legendSwitchDisableColor : "#c8c8c8",
tooltipFontColor : "#333333",
tooltipFontSize : 12,
tooltipBackgroundColor : "#fff",
tooltipBackgroundOpacity : 1,
tooltipBorderColor : null,
tooltipBorderWidth : 2,
tooltipLineColor : null,
tooltipLineWidth : 1,
scrollBackgroundSize : 7,
scrollBackgroundColor : "#3e3e3e",
scrollThumbBackgroundColor : "#666666",
scrollThumbBorderColor : "#686868",
zoomBackgroundColor : "#ff0000",
zoomFocusColor : "#808080",
zoomScrollBackgroundSize : 45,
zoomScrollButtonSize : 18,
zoomScrollAreaBackgroundColor : "#fff",
zoomScrollAreaBackgroundOpacity : 0.7,
zoomScrollAreaBorderColor : "#d4d4d4",
zoomScrollAreaBorderWidth : 1,
zoomScrollAreaBorderRadius : 3,
zoomScrollGridFontSize : 10,
zoomScrollGridTickPadding : 4,
zoomScrollBrushAreaBackgroundOpacity : 0.7,
zoomScrollBrushLineBorderWidth : 1,
crossBorderColor : "#a9a9a9",
crossBorderWidth : 1,
crossBorderOpacity : 0.8,
crossBalloonFontSize : 11,
crossBalloonFontColor : "#333",
crossBalloonBackgroundColor : "#fff",
crossBalloonBackgroundOpacity : 1,
dragSelectBackgroundColor : "#7BBAE7",
dragSelectBackgroundOpacity : 0.3,
dragSelectBorderColor : "#7BBAE7",
dragSelectBorderWidth : 1,
guidelineBorderColor : "#a9a9a9",
guidelineBorderWidth : 1,
guidelineBorderOpacity : 0.8,
guidelineBalloonFontSize : 11,
guidelineBalloonFontColor : "#fff",
guidelineBalloonBackgroundColor : "#000",
guidelineBalloonBackgroundOpacity : 0.5,
guidelineBorderDashArray : "2,2",
guidelinePointRadius : 3,
guidelinePointBorderColor : "#fff",
guidelinePointBorderWidth : 1,
guidelineTooltipFontColor : "#333",
guidelineTooltipFontSize : 12,
guidelineTooltipPointRadius : 3,
guidelineTooltipBackgroundColor : "#fff",
guidelineTooltipBackgroundOpacity : 0.7,
guidelineTooltipBorderColor : "#a9a9a9",
guidelineTooltipBorderWidth : 1,
// mapPathBackgroundColor : "#67B7DC",
// mapPathBackgroundOpacity : 1,
// mapPathBorderColor : "#fff",
// mapPathBorderWidth : 1,
// mapPathBorderOpacity : 1,
// mapBubbleBackgroundOpacity : 0.5,
// mapBubbleBorderWidth : 1,
// mapBubbleFontSize : 11,
// mapBubbleFontColor : "#868686",
// mapSelectorHoverColor : "#5a73db",
// mapSelectorActiveColor : "#CC0000",
// mapFlightRouteAirportSmallColor : "#CC0000",
// mapFlightRouteAirportLargeColor : "#000",
// mapFlightRouteAirportBorderWidth : 2,
// mapFlightRouteAirportRadius : 8,
// mapFlightRouteLineColor : "#ff0000",
// mapFlightRouteLineWidth : 1,
// mapWeatherBackgroundColor : "#fff",
// mapWeatherBorderColor : "#a9a9a9",
// mapWeatherFontSize : 11,
// mapWeatherTitleFontColor : "#666",
// mapWeatherInfoFontColor : "#ff0000",
// mapCompareBubbleMaxLineColor : "#fff",
// mapCompareBubbleMaxLineDashArray : "2,2",
// mapCompareBubbleMaxBorderColor : "#fff",
// mapCompareBubbleMaxFontSize : 36,
// mapCompareBubbleMaxFontColor : "#fff",
// mapCompareBubbleMinBorderColor : "#ffff00",
// mapCompareBubbleMinFontSize : 24,
// mapCompareBubbleMinFontColor : "#000",
// mapControlButtonColor : "#3994e2",
// mapControlLeftButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAIQjI9poMcdXpOKTujw0pGjAgA7",
// mapControlRightButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAIQjI8JycvonomSKhksxBqbAgA7",
// mapControlTopButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAIQjI+pCmvd2IkzUYqw27yfAgA7",
// mapControlBottomButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAIQjI+pyw37TDxTUhhq0q2fAgA7",
// mapControlHomeButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAAAAAAAAACH5BAUAAAEALAAAAAALAAsAAAIZjI8ZoAffIERzMVMxm+9KvIBh6Imb2aVMAQA7",
// mapControlUpButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAISjI8ZoMhtHpQH2HsV1TD29SkFADs=",
// mapControlDownButtonImage : "data:image/gif;base64,R0lGODlhCwALAPABAP///wAAACH5BAUAAAEALAAAAAALAAsAAAIMjI+py+0BopSv2qsKADs=",
// mapControlScrollColor : "#000",
// mapControlScrollLineColor : "#fff",
// mapMinimapBackgroundColor : "transparent",
// mapMinimapBorderColor : "transparent",
// mapMinimapBorderWidth : 1,
// mapMinimapPathBackgroundColor : "#67B7DC",
// mapMinimapPathBackgroundOpacity : 0.5,
// mapMinimapPathBorderColor : "#67B7DC",
// mapMinimapPathBorderWidth : 0.5,
// mapMinimapPathBorderOpacity : 0.1,
// mapMinimapDragBackgroundColor : "#7CC7C3",
// mapMinimapDragBackgroundOpacity : 0.3,
// mapMinimapDragBorderColor : "#56B4AF",
// mapMinimapDragBorderWidth : 1,
// Polygon Brushes
polygonColumnBackgroundOpacity: 0.6,
polygonColumnBorderOpacity: 0.5,
polygonScatterRadialOpacity: 0.7,
polygonScatterBackgroundOpacity: 0.8,
polygonLineBackgroundOpacity: 0.6,
polygonLineBorderOpacity: 0.7,
// Animation Brushes
bubbleCloudFontColor: "#fff",
bubbleCloudFontSize: 11,
bubbleCloudFontWeight: "bold",
equalizerColumnErrorBackgroundColor: "#ff0000",
equalizerColumnErrorFontColor: "#fff"
}
}
}