@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
163 lines • 5.72 kB
JavaScript
/**
*
* 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
import { tokens } from '@neo4j-ndl/base';
const axisCommon = (theme) => ({
axisLabel: {
color: tokens.theme[theme].color.neutral.text.weaker,
fontFamily: tokens.typography['body-small'].fontFamily,
fontSize: tokens.typography['body-small'].fontSize,
},
axisLine: {
lineStyle: {
cap: 'square',
color: tokens.theme[theme].color.neutral.border.strong,
width: 2,
},
},
axisTick: {
length: 8,
lineStyle: {
color: tokens.theme[theme].color.neutral.border.strong,
width: 1,
},
show: true,
},
minorSplitLine: {
lineStyle: {
color: tokens.theme[theme].color.neutral.border.weak,
},
},
splitArea: {
areaStyle: {
color: [tokens.theme[theme].color.neutral.hover, 'transparent'],
},
},
splitLine: {
lineStyle: {
color: tokens.theme[theme].color.neutral.border.weak,
},
},
});
export const ndlEchartsTheme = (theme, palette) => {
return {
darkMode: theme === 'dark',
color: palette !== null && palette !== void 0 ? palette : Object.values(tokens.categorical),
backgroundColor: 'transparent',
axisPointer: {
crossStyle: {
color: tokens.theme[theme].color.neutral.border.strong,
},
label: {
color: tokens.theme[theme].color.neutral.text.weaker,
},
lineStyle: {
color: tokens.theme[theme].color.neutral.border.strong,
},
},
// We use a custom legend so this does not affect anything
legend: {},
textStyle: {
color: 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: tokens.theme[theme].color.neutral.border.weak,
borderRadius: parseInt(tokens.borderRadius.sm.replace('px', '')),
dataBackground: {
areaStyle: {
color: tokens.theme[theme].color.neutral.bg.default,
opacity: 1,
},
lineStyle: {
color: tokens.theme[theme].color.neutral.border.weak,
opacity: 1,
width: 1,
},
},
emphasis: {
handleLabel: {},
handleStyle: {
borderColor: tokens.theme[theme].color.neutral.border.strong,
color: tokens.theme[theme].color.neutral.bg.strong,
opacity: 1,
},
moveHandleStyle: {
borderColor: tokens.theme[theme].color.neutral.border.strong,
color: tokens.theme[theme].color.neutral.border.strong,
opacity: 1,
},
},
fillerColor: `rgb( from ${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: tokens.theme[theme].color.neutral.border.strong,
color: tokens.theme[theme].color.neutral.bg.weak,
// borderRadius: 0, // Doesn't work
},
moveHandleSize: 6,
moveHandleStyle: {
backgroundColor: tokens.theme[theme].color.neutral.bg.strong,
color: tokens.theme[theme].color.neutral.bg.strong,
opacity: 1, // 0.3,
},
selectedDataBackground: {
areaStyle: {
color: tokens.theme[theme].color.neutral.bg['on-bg-weak'],
opacity: 1,
shadowBlur: 0,
},
lineStyle: {
color: tokens.theme[theme].color.neutral.border.strong,
opacity: 1,
width: 1,
},
},
textStyle: {
color: 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: {},
};
};
//# sourceMappingURL=ndl-echarts-theme.js.map