@spaced-out/ui-design-system
Version:
Sense UI components library
88 lines (87 loc) • 2.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mergeChartUserOptions = exports.getDataVizColor = exports.commonChartOptions = exports.breadcrumbStyle = exports.DATA_VIZ_COLORS = void 0;
var _color = require("../../styles/variables/_color");
var _helpers = require("./helpers");
var _typography = require("./typography");
var _ChartTooltipModule = _interopRequireDefault(require("../../components/Charts/ChartTooltip/ChartTooltip.module.css"));
var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DATA_VIZ_COLORS = exports.DATA_VIZ_COLORS = [_color.colorDataViz1, _color.colorDataViz2, _color.colorDataViz3, _color.colorDataViz4, _color.colorDataViz5, _color.colorDataViz6, _color.colorDataViz7, _color.colorDataViz8];
const getDataVizColor = dataIndex => {
const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
return DATA_VIZ_COLORS[colorIndex];
};
exports.getDataVizColor = getDataVizColor;
const breadcrumbStyle = exports.breadcrumbStyle = {
..._typography.subTitleExtraSmall,
color: _color.colorTextSecondary
};
const commonChartOptions = exports.commonChartOptions = {
chart: {
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
credits: {
enabled: false
},
tooltip: {
followPointer: false,
backgroundColor: _color.colorTooltipFill,
useHTML: true,
outside: true,
headerFormat: `<span class="${_typographyModule.default.bodySmall} ${_ChartTooltipModule.default.tooltipHeader}">{point.key}</span>`,
pointFormat: `<span class=${_ChartTooltipModule.default.tooltipPoint}>
<span style="background-color:{point.color};" class=${_ChartTooltipModule.default.indicatorCircle}></span>
<span class="${_ChartTooltipModule.default.tooltipContent} ${_typographyModule.default.bodyMedium}"> {series.name}: {point.y}</span>
</span>`
},
drilldown: {
breadcrumbs: {
floating: true,
style: breadcrumbStyle,
buttonTheme: {
style: breadcrumbStyle
}
}
},
legend: {
itemStyle: {
..._typography.formLabelSmall,
paddingTop: '1px'
},
symbolHeight: 8,
enabled: true
},
xAxis: {
type: 'category',
padding: 0
},
navigation: {
breadcrumbs: {
buttonTheme: {
style: {
color: _color.colorFillInversePrimary
}
},
separator: {
text: '>'
}
}
}
};
const mergeChartUserOptions = (defaultoptions, userOptions) => (0, _helpers.deepMerge)(defaultoptions, userOptions);
exports.mergeChartUserOptions = mergeChartUserOptions;