@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
167 lines • 6.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ndlEchartsTheme = void 0;
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// oxlint-disable sort-keys
const base_1 = require("@neo4j-ndl/base");
const axisCommon = (theme) => ({
axisLabel: {
color: base_1.tokens.theme[theme].color.neutral.text.weaker,
fontFamily: base_1.tokens.typography['body-small'].fontFamily,
fontSize: base_1.tokens.typography['body-small'].fontSize,
},
axisLine: {
lineStyle: {
cap: 'square',
color: base_1.tokens.theme[theme].color.neutral.border.strong,
width: 2,
},
},
axisTick: {
length: 8,
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.strong,
width: 1,
},
show: true,
},
minorSplitLine: {
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.weak,
},
},
splitArea: {
areaStyle: {
color: [base_1.tokens.theme[theme].color.neutral.hover, 'transparent'],
},
},
splitLine: {
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.weak,
},
},
});
const ndlEchartsTheme = (theme, palette) => {
return {
darkMode: theme === 'dark',
color: palette !== null && palette !== void 0 ? palette : Object.values(base_1.tokens.categorical),
backgroundColor: 'transparent',
axisPointer: {
crossStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.strong,
},
label: {
color: base_1.tokens.theme[theme].color.neutral.text.weaker,
},
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.strong,
},
},
// We use a custom legend so this does not affect anything
legend: {},
textStyle: {
color: base_1.tokens.theme[theme].color.neutral.text.weaker,
},
// We are not using the echarts title so this does not affect anything
title: {},
toolbox: {},
dataZoom: {
backgroundColor: 'transparent',
borderColor: base_1.tokens.theme[theme].color.neutral.border.weak,
borderRadius: parseInt(base_1.tokens.borderRadius.sm.replace('px', '')),
dataBackground: {
areaStyle: {
color: base_1.tokens.theme[theme].color.neutral.bg.default,
opacity: 1,
},
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.weak,
opacity: 1,
width: 1,
},
},
emphasis: {
handleLabel: {},
handleStyle: {
borderColor: base_1.tokens.theme[theme].color.neutral.border.strong,
color: base_1.tokens.theme[theme].color.neutral.bg.strong,
opacity: 1,
},
moveHandleStyle: {
borderColor: base_1.tokens.theme[theme].color.neutral.border.strong,
color: base_1.tokens.theme[theme].color.neutral.border.strong,
opacity: 1,
},
},
fillerColor: `rgb( from ${base_1.tokens.theme[theme].color.neutral.hover} r g b / 0.1)`,
handleIcon: 'M2 0.5h4s1.5 0 1.5 1.5v16s0 1.5 -1.5 1.5h-4s-1.5 0 -1.5 -1.5v-16s0 -1.5 1.5 -1.5',
handleSize: '80%',
handleStyle: {
borderColor: base_1.tokens.theme[theme].color.neutral.border.strong,
color: base_1.tokens.theme[theme].color.neutral.bg.weak,
// borderRadius: 0, // Doesn't work
},
moveHandleSize: 6,
moveHandleStyle: {
backgroundColor: base_1.tokens.theme[theme].color.neutral.bg.strong,
color: base_1.tokens.theme[theme].color.neutral.bg.strong,
opacity: 1, // 0.3,
},
selectedDataBackground: {
areaStyle: {
color: base_1.tokens.theme[theme].color.neutral.bg['on-bg-weak'],
opacity: 1,
shadowBlur: 0,
},
lineStyle: {
color: base_1.tokens.theme[theme].color.neutral.border.strong,
opacity: 1,
width: 1,
},
},
textStyle: {
color: base_1.tokens.theme[theme].color.neutral.text.weaker,
},
},
// Not implemented
visualMap: {},
// Not implemented
timeline: {},
// Not implemented
calendar: {},
timeAxis: axisCommon(theme),
logAxis: axisCommon(theme),
valueAxis: axisCommon(theme),
categoryAxis: axisCommon(theme),
line: {
symbol: 'circle',
},
// Not implemented
graph: {},
// Not implemented
gauge: {},
// Not implemented
candlestick: {},
};
};
exports.ndlEchartsTheme = ndlEchartsTheme;
//# sourceMappingURL=ndl-echarts-theme.js.map