@hitachivantara/uikit-react-core 3.66.1 → 3.66.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Barchart/Barchart.d.ts +14 -0
- package/dist/Barchart/Barchart.js +239 -0
- package/dist/Barchart/Barchart.js.map +1 -0
- package/dist/Barchart/barchartPlotlyOverrides.js +59 -0
- package/dist/Barchart/barchartPlotlyOverrides.js.map +1 -0
- package/dist/Barchart/index.d.ts +2 -0
- package/dist/Barchart/index.js +16 -0
- package/dist/Barchart/index.js.map +1 -0
- package/dist/Barchart/styles.js +10 -0
- package/dist/Barchart/styles.js.map +1 -0
- package/dist/Chart/Chart.d.ts +25 -0
- package/dist/Chart/Chart.js +215 -0
- package/dist/Chart/Chart.js.map +1 -0
- package/dist/Chart/Plot/Plot.d.ts +43 -0
- package/dist/Chart/Plot/Plot.js +131 -0
- package/dist/Chart/Plot/Plot.js.map +1 -0
- package/dist/Chart/Plot/index.d.ts +2 -0
- package/dist/Chart/Plot/index.js +16 -0
- package/dist/Chart/Plot/index.js.map +1 -0
- package/dist/Chart/Plot/styles.js +10 -0
- package/dist/Chart/Plot/styles.js.map +1 -0
- package/dist/Chart/Tooltip/MultiTooltip/MultiTooltip.js +162 -0
- package/dist/Chart/Tooltip/MultiTooltip/MultiTooltip.js.map +1 -0
- package/dist/Chart/Tooltip/MultiTooltip/index.js +16 -0
- package/dist/Chart/Tooltip/MultiTooltip/index.js.map +1 -0
- package/dist/Chart/Tooltip/MultiTooltip/styles.js +51 -0
- package/dist/Chart/Tooltip/MultiTooltip/styles.js.map +1 -0
- package/dist/Chart/Tooltip/SingleTooltip/SingleTooltip.js +87 -0
- package/dist/Chart/Tooltip/SingleTooltip/SingleTooltip.js.map +1 -0
- package/dist/Chart/Tooltip/SingleTooltip/index.js +16 -0
- package/dist/Chart/Tooltip/SingleTooltip/index.js.map +1 -0
- package/dist/Chart/Tooltip/SingleTooltip/styles.js +26 -0
- package/dist/Chart/Tooltip/SingleTooltip/styles.js.map +1 -0
- package/dist/Chart/Tooltip/Tooltip.js +165 -0
- package/dist/Chart/Tooltip/Tooltip.js.map +1 -0
- package/dist/Chart/Tooltip/index.js +16 -0
- package/dist/Chart/Tooltip/index.js.map +1 -0
- package/dist/Chart/Tooltip/styles.js +16 -0
- package/dist/Chart/Tooltip/styles.js.map +1 -0
- package/dist/Chart/chartPlotlyOverrides.js +169 -0
- package/dist/Chart/chartPlotlyOverrides.js.map +1 -0
- package/dist/Chart/index.d.ts +5 -0
- package/dist/Chart/index.js +16 -0
- package/dist/Chart/index.js.map +1 -0
- package/dist/Chart/styles.js +49 -0
- package/dist/Chart/styles.js.map +1 -0
- package/dist/Donutchart/Donutchart.d.ts +10 -0
- package/dist/Donutchart/Donutchart.js +124 -0
- package/dist/Donutchart/Donutchart.js.map +1 -0
- package/dist/Donutchart/donutchartPlotlyOverrides.js +56 -0
- package/dist/Donutchart/donutchartPlotlyOverrides.js.map +1 -0
- package/dist/Donutchart/index.d.ts +2 -0
- package/dist/Donutchart/index.js +16 -0
- package/dist/Donutchart/index.js.map +1 -0
- package/dist/Donutchart/styles.js +10 -0
- package/dist/Donutchart/styles.js.map +1 -0
- package/dist/Linechart/Linechart.d.ts +14 -0
- package/dist/Linechart/Linechart.js +130 -0
- package/dist/Linechart/Linechart.js.map +1 -0
- package/dist/Linechart/index.d.ts +2 -0
- package/dist/Linechart/index.js +16 -0
- package/dist/Linechart/index.js.map +1 -0
- package/dist/Linechart/lineChartPlotlyOverrides.js +79 -0
- package/dist/Linechart/lineChartPlotlyOverrides.js.map +1 -0
- package/dist/Linechart/styles.js +10 -0
- package/dist/Linechart/styles.js.map +1 -0
- package/dist/Provider/Provider.js +3 -14
- package/dist/Provider/Provider.js.map +1 -1
- package/dist/Stack/Stack.js +14 -14
- package/dist/Stack/Stack.js.map +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.js +27 -0
- package/dist/index.js.map +1 -1
- package/dist/legacy/Barchart/Barchart.d.ts +14 -0
- package/dist/legacy/Barchart/Barchart.js +195 -0
- package/dist/legacy/Barchart/Barchart.js.map +1 -0
- package/dist/legacy/Barchart/barchartPlotlyOverrides.js +43 -0
- package/dist/legacy/Barchart/barchartPlotlyOverrides.js.map +1 -0
- package/dist/legacy/Barchart/index.d.ts +2 -0
- package/dist/legacy/Barchart/index.js +2 -0
- package/dist/legacy/Barchart/index.js.map +1 -0
- package/dist/legacy/Barchart/styles.js +3 -0
- package/dist/legacy/Barchart/styles.js.map +1 -0
- package/dist/legacy/Chart/Chart.d.ts +25 -0
- package/dist/legacy/Chart/Chart.js +174 -0
- package/dist/legacy/Chart/Chart.js.map +1 -0
- package/dist/legacy/Chart/Plot/Plot.d.ts +43 -0
- package/dist/legacy/Chart/Plot/Plot.js +93 -0
- package/dist/legacy/Chart/Plot/Plot.js.map +1 -0
- package/dist/legacy/Chart/Plot/index.d.ts +2 -0
- package/dist/legacy/Chart/Plot/index.js +2 -0
- package/dist/legacy/Chart/Plot/index.js.map +1 -0
- package/dist/legacy/Chart/Plot/styles.js +3 -0
- package/dist/legacy/Chart/Plot/styles.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/MultiTooltip.js +130 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/MultiTooltip.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/index.js +2 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/index.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/styles.js +43 -0
- package/dist/legacy/Chart/Tooltip/MultiTooltip/styles.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/SingleTooltip.js +54 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/SingleTooltip.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/index.js +2 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/index.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/styles.js +18 -0
- package/dist/legacy/Chart/Tooltip/SingleTooltip/styles.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/Tooltip.js +128 -0
- package/dist/legacy/Chart/Tooltip/Tooltip.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/index.js +2 -0
- package/dist/legacy/Chart/Tooltip/index.js.map +1 -0
- package/dist/legacy/Chart/Tooltip/styles.js +9 -0
- package/dist/legacy/Chart/Tooltip/styles.js.map +1 -0
- package/dist/legacy/Chart/chartPlotlyOverrides.js +147 -0
- package/dist/legacy/Chart/chartPlotlyOverrides.js.map +1 -0
- package/dist/legacy/Chart/index.d.ts +5 -0
- package/dist/legacy/Chart/index.js +2 -0
- package/dist/legacy/Chart/index.js.map +1 -0
- package/dist/legacy/Chart/styles.js +32 -0
- package/dist/legacy/Chart/styles.js.map +1 -0
- package/dist/legacy/Donutchart/Donutchart.d.ts +10 -0
- package/dist/legacy/Donutchart/Donutchart.js +86 -0
- package/dist/legacy/Donutchart/Donutchart.js.map +1 -0
- package/dist/legacy/Donutchart/donutchartPlotlyOverrides.js +40 -0
- package/dist/legacy/Donutchart/donutchartPlotlyOverrides.js.map +1 -0
- package/dist/legacy/Donutchart/index.d.ts +2 -0
- package/dist/legacy/Donutchart/index.js +2 -0
- package/dist/legacy/Donutchart/index.js.map +1 -0
- package/dist/legacy/Donutchart/styles.js +3 -0
- package/dist/legacy/Donutchart/styles.js.map +1 -0
- package/dist/legacy/Linechart/Linechart.d.ts +14 -0
- package/dist/legacy/Linechart/Linechart.js +92 -0
- package/dist/legacy/Linechart/Linechart.js.map +1 -0
- package/dist/legacy/Linechart/index.d.ts +2 -0
- package/dist/legacy/Linechart/index.js +2 -0
- package/dist/legacy/Linechart/index.js.map +1 -0
- package/dist/legacy/Linechart/lineChartPlotlyOverrides.js +63 -0
- package/dist/legacy/Linechart/lineChartPlotlyOverrides.js.map +1 -0
- package/dist/legacy/Linechart/styles.js +3 -0
- package/dist/legacy/Linechart/styles.js.map +1 -0
- package/dist/legacy/Provider/Provider.js +4 -15
- package/dist/legacy/Provider/Provider.js.map +1 -1
- package/dist/legacy/Stack/Stack.js +14 -14
- package/dist/legacy/Stack/Stack.js.map +1 -1
- package/dist/legacy/index.d.ts +9 -0
- package/dist/legacy/index.js +3 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/Barchart/Barchart.d.ts +14 -0
- package/dist/modern/Barchart/Barchart.js +176 -0
- package/dist/modern/Barchart/Barchart.js.map +1 -0
- package/dist/modern/Barchart/barchartPlotlyOverrides.js +41 -0
- package/dist/modern/Barchart/barchartPlotlyOverrides.js.map +1 -0
- package/dist/modern/Barchart/index.d.ts +2 -0
- package/dist/modern/Barchart/index.js +2 -0
- package/dist/modern/Barchart/index.js.map +1 -0
- package/dist/modern/Barchart/styles.js +3 -0
- package/dist/modern/Barchart/styles.js.map +1 -0
- package/dist/modern/Chart/Chart.d.ts +25 -0
- package/dist/modern/Chart/Chart.js +158 -0
- package/dist/modern/Chart/Chart.js.map +1 -0
- package/dist/modern/Chart/Plot/Plot.d.ts +43 -0
- package/dist/modern/Chart/Plot/Plot.js +94 -0
- package/dist/modern/Chart/Plot/Plot.js.map +1 -0
- package/dist/modern/Chart/Plot/index.d.ts +2 -0
- package/dist/modern/Chart/Plot/index.js +2 -0
- package/dist/modern/Chart/Plot/index.js.map +1 -0
- package/dist/modern/Chart/Plot/styles.js +3 -0
- package/dist/modern/Chart/Plot/styles.js.map +1 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/MultiTooltip.js +123 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/MultiTooltip.js.map +1 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/index.js +2 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/index.js.map +1 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/styles.js +41 -0
- package/dist/modern/Chart/Tooltip/MultiTooltip/styles.js.map +1 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/SingleTooltip.js +51 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/SingleTooltip.js.map +1 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/index.js +2 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/index.js.map +1 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/styles.js +16 -0
- package/dist/modern/Chart/Tooltip/SingleTooltip/styles.js.map +1 -0
- package/dist/modern/Chart/Tooltip/Tooltip.js +125 -0
- package/dist/modern/Chart/Tooltip/Tooltip.js.map +1 -0
- package/dist/modern/Chart/Tooltip/index.js +2 -0
- package/dist/modern/Chart/Tooltip/index.js.map +1 -0
- package/dist/modern/Chart/Tooltip/styles.js +9 -0
- package/dist/modern/Chart/Tooltip/styles.js.map +1 -0
- package/dist/modern/Chart/chartPlotlyOverrides.js +137 -0
- package/dist/modern/Chart/chartPlotlyOverrides.js.map +1 -0
- package/dist/modern/Chart/index.d.ts +5 -0
- package/dist/modern/Chart/index.js +2 -0
- package/dist/modern/Chart/index.js.map +1 -0
- package/dist/modern/Chart/styles.js +23 -0
- package/dist/modern/Chart/styles.js.map +1 -0
- package/dist/modern/Donutchart/Donutchart.d.ts +10 -0
- package/dist/modern/Donutchart/Donutchart.js +82 -0
- package/dist/modern/Donutchart/Donutchart.js.map +1 -0
- package/dist/modern/Donutchart/donutchartPlotlyOverrides.js +38 -0
- package/dist/modern/Donutchart/donutchartPlotlyOverrides.js.map +1 -0
- package/dist/modern/Donutchart/index.d.ts +2 -0
- package/dist/modern/Donutchart/index.js +2 -0
- package/dist/modern/Donutchart/index.js.map +1 -0
- package/dist/modern/Donutchart/styles.js +3 -0
- package/dist/modern/Donutchart/styles.js.map +1 -0
- package/dist/modern/Linechart/Linechart.d.ts +14 -0
- package/dist/modern/Linechart/Linechart.js +87 -0
- package/dist/modern/Linechart/Linechart.js.map +1 -0
- package/dist/modern/Linechart/index.d.ts +2 -0
- package/dist/modern/Linechart/index.js +2 -0
- package/dist/modern/Linechart/index.js.map +1 -0
- package/dist/modern/Linechart/lineChartPlotlyOverrides.js +59 -0
- package/dist/modern/Linechart/lineChartPlotlyOverrides.js.map +1 -0
- package/dist/modern/Linechart/styles.js +3 -0
- package/dist/modern/Linechart/styles.js.map +1 -0
- package/dist/modern/Provider/Provider.js +3 -8
- package/dist/modern/Provider/Provider.js.map +1 -1
- package/dist/modern/Stack/Stack.js +4 -4
- package/dist/modern/Stack/Stack.js.map +1 -1
- package/dist/modern/index.d.ts +9 -0
- package/dist/modern/index.js +3 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +7 -6
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
const _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "afterPlot", "xAxisTitle", "yAxisTitle"];
|
|
4
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
5
|
+
import React, { useState, useMemo, useCallback } from "react";
|
|
6
|
+
import PropTypes from "prop-types";
|
|
7
|
+
import isNil from "lodash/isNil";
|
|
8
|
+
import { useTheme, withStyles } from "@material-ui/core";
|
|
9
|
+
import Tooltip from "./Tooltip";
|
|
10
|
+
import { applyLayoutDefaults, applyConfigDefaults } from "./chartPlotlyOverrides";
|
|
11
|
+
import Plot from "./Plot";
|
|
12
|
+
import styles from "./styles";
|
|
13
|
+
|
|
14
|
+
const Chart = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
id,
|
|
17
|
+
classes,
|
|
18
|
+
data,
|
|
19
|
+
layout,
|
|
20
|
+
config,
|
|
21
|
+
tooltipType = "multiple",
|
|
22
|
+
afterPlot,
|
|
23
|
+
xAxisTitle,
|
|
24
|
+
yAxisTitle
|
|
25
|
+
} = _ref,
|
|
26
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
+
|
|
28
|
+
const theme = useTheme();
|
|
29
|
+
/* Values derived from props */
|
|
30
|
+
// Check if the barchart is horizontal or vertical.
|
|
31
|
+
|
|
32
|
+
const isHorizontal = useMemo(() => {
|
|
33
|
+
var _data$;
|
|
34
|
+
|
|
35
|
+
return !isNil((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.orientation) ? data[0].orientation.toUpperCase() === "H" : false;
|
|
36
|
+
}, [data]);
|
|
37
|
+
const chartLayout = useMemo(() => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle), [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]);
|
|
38
|
+
const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);
|
|
39
|
+
const useSingle = tooltipType === "single";
|
|
40
|
+
/* State */
|
|
41
|
+
|
|
42
|
+
const [isHover, setIsHover] = useState(false);
|
|
43
|
+
const [coordinates, setCoordinates] = useState({
|
|
44
|
+
x: 0,
|
|
45
|
+
y: 0
|
|
46
|
+
});
|
|
47
|
+
const [dataTooltip, setDataTooltip] = useState();
|
|
48
|
+
/* Callbacks */
|
|
49
|
+
// Extract data from the plotly onHover event to be used to create the tooltip.
|
|
50
|
+
|
|
51
|
+
const onHover = useCallback(event => {
|
|
52
|
+
const {
|
|
53
|
+
points
|
|
54
|
+
} = event;
|
|
55
|
+
const dataFromPoints = {
|
|
56
|
+
title: "",
|
|
57
|
+
elements: []
|
|
58
|
+
};
|
|
59
|
+
points.forEach((p, i) => {
|
|
60
|
+
var _fData$marker, _fData$line, _fData$labels;
|
|
61
|
+
|
|
62
|
+
const fData = p.fullData;
|
|
63
|
+
const pNumber = p.pointNumber;
|
|
64
|
+
if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;
|
|
65
|
+
dataFromPoints.elements.push({
|
|
66
|
+
color: ((_fData$marker = fData.marker) === null || _fData$marker === void 0 ? void 0 : _fData$marker.color) || ((_fData$line = fData.line) === null || _fData$line === void 0 ? void 0 : _fData$line.color) || p.color,
|
|
67
|
+
name: ((_fData$labels = fData.labels) === null || _fData$labels === void 0 ? void 0 : _fData$labels[pNumber]) || fData.name,
|
|
68
|
+
value: isHorizontal ? p.x : p.y || p.value
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
setDataTooltip(dataFromPoints);
|
|
72
|
+
setIsHover(true);
|
|
73
|
+
}, [isHorizontal]);
|
|
74
|
+
const onUnHover = useCallback(() => {
|
|
75
|
+
setIsHover(false);
|
|
76
|
+
}, []);
|
|
77
|
+
const onMouseMove = useCallback(event => {
|
|
78
|
+
setCoordinates({
|
|
79
|
+
x: event.clientX,
|
|
80
|
+
y: event.clientY
|
|
81
|
+
});
|
|
82
|
+
}, []);
|
|
83
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, isHover && /*#__PURE__*/React.createElement(Tooltip, {
|
|
84
|
+
coordinates: coordinates,
|
|
85
|
+
data: dataTooltip,
|
|
86
|
+
useSingle: useSingle
|
|
87
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
id: id,
|
|
89
|
+
className: classes.root
|
|
90
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
onMouseMove: onMouseMove
|
|
92
|
+
}, /*#__PURE__*/React.createElement(Plot, _extends({
|
|
93
|
+
data: data,
|
|
94
|
+
layout: chartLayout,
|
|
95
|
+
config: chartConfig,
|
|
96
|
+
onHover: onHover,
|
|
97
|
+
onUnHover: onUnHover,
|
|
98
|
+
afterPlot: afterPlot
|
|
99
|
+
}, others)))));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
process.env.NODE_ENV !== "production" ? Chart.propTypes = {
|
|
103
|
+
/**
|
|
104
|
+
* An Id passed on to the component
|
|
105
|
+
*/
|
|
106
|
+
id: PropTypes.string,
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* A Jss Object used to override or extend the styles applied.
|
|
110
|
+
*/
|
|
111
|
+
classes: PropTypes.shape({
|
|
112
|
+
root: PropTypes.string
|
|
113
|
+
}),
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Plotly data object (see https://plot.ly/javascript/reference/).
|
|
117
|
+
*/
|
|
118
|
+
data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Plotly layout object (see https://plot.ly/javascript/reference/#layout).
|
|
122
|
+
*/
|
|
123
|
+
layout: PropTypes.instanceOf(Object).isRequired,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Plotly config object (see https://plot.ly/javascript/configuration-options/).
|
|
127
|
+
*/
|
|
128
|
+
config: PropTypes.instanceOf(Object),
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Defines if should use a single or multiline tooltip.
|
|
132
|
+
*/
|
|
133
|
+
tooltipType: PropTypes.oneOf(["single", "multiple"]),
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Function to be called after plot render.
|
|
137
|
+
*/
|
|
138
|
+
afterPlot: PropTypes.func,
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Defines the X axis title.
|
|
142
|
+
*/
|
|
143
|
+
xAxisTitle: PropTypes.string,
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Defines the Y axis title.
|
|
147
|
+
*/
|
|
148
|
+
yAxisTitle: PropTypes.string,
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Defines the chart subtitle.
|
|
152
|
+
*/
|
|
153
|
+
subtitle: PropTypes.string
|
|
154
|
+
} : void 0;
|
|
155
|
+
export default withStyles(styles, {
|
|
156
|
+
name: "HvChart"
|
|
157
|
+
})(Chart);
|
|
158
|
+
//# sourceMappingURL=Chart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chart.js","names":["React","useState","useMemo","useCallback","PropTypes","isNil","useTheme","withStyles","Tooltip","applyLayoutDefaults","applyConfigDefaults","Plot","styles","Chart","id","classes","data","layout","config","tooltipType","afterPlot","xAxisTitle","yAxisTitle","others","theme","isHorizontal","orientation","toUpperCase","chartLayout","chartConfig","useSingle","isHover","setIsHover","coordinates","setCoordinates","x","y","dataTooltip","setDataTooltip","onHover","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle"],"sources":["../../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { useTheme, withStyles } from \"@material-ui/core\";\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n afterPlot,\n xAxisTitle,\n yAxisTitle,\n ...others\n}) => {\n const theme = useTheme();\n\n /* Values derived from props */\n\n // Check if the barchart is horizontal or vertical.\n const isHorizontal = useMemo(\n () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n [data]\n );\n\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n );\n\n const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n const useSingle = tooltipType === \"single\";\n\n /* State */\n\n const [isHover, setIsHover] = useState(false);\n const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n const [dataTooltip, setDataTooltip] = useState();\n\n /* Callbacks */\n\n // Extract data from the plotly onHover event to be used to create the tooltip.\n const onHover = useCallback(\n (event) => {\n const { points } = event;\n\n const dataFromPoints = {\n title: \"\",\n elements: [],\n };\n\n points.forEach((p, i) => {\n const fData = p.fullData;\n const pNumber = p.pointNumber;\n\n if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n dataFromPoints.elements.push({\n color: fData.marker?.color || fData.line?.color || p.color,\n name: fData.labels?.[pNumber] || fData.name,\n value: isHorizontal ? p.x : p.y || p.value,\n });\n });\n\n setDataTooltip(dataFromPoints);\n setIsHover(true);\n },\n [isHorizontal]\n );\n\n const onUnHover = useCallback(() => {\n setIsHover(false);\n }, []);\n\n const onMouseMove = useCallback((event) => {\n setCoordinates({\n x: event.clientX,\n y: event.clientY,\n });\n }, []);\n\n return (\n <>\n {isHover && <Tooltip coordinates={coordinates} data={dataTooltip} useSingle={useSingle} />}\n <div id={id} className={classes.root}>\n <div onMouseMove={onMouseMove}>\n <Plot\n data={data}\n layout={chartLayout}\n config={chartConfig}\n onHover={onHover}\n onUnHover={onUnHover}\n afterPlot={afterPlot}\n {...others}\n />\n </div>\n </div>\n </>\n );\n};\n\nChart.propTypes = {\n /**\n * An Id passed on to the component\n */\n id: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n root: PropTypes.string,\n }),\n\n /**\n * Plotly data object (see https://plot.ly/javascript/reference/).\n */\n data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n /**\n * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n */\n layout: PropTypes.instanceOf(Object).isRequired,\n /**\n * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n */\n config: PropTypes.instanceOf(Object),\n /**\n * Defines if should use a single or multiline tooltip.\n */\n tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n /**\n * Function to be called after plot render.\n */\n afterPlot: PropTypes.func,\n /**\n * Defines the X axis title.\n */\n xAxisTitle: PropTypes.string,\n /**\n * Defines the Y axis title.\n */\n yAxisTitle: PropTypes.string,\n /**\n * Defines the chart subtitle.\n */\n subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,OAA1B,EAAmCC,WAAnC,QAAsD,OAAtD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,cAAlB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAAqC,mBAArC;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,SAASC,mBAAT,EAA8BC,mBAA9B,QAAyD,wBAAzD;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,KAAK,GAAG,QAWR;EAAA,IAXS;IACbC,EADa;IAEbC,OAFa;IAGbC,IAHa;IAIbC,MAJa;IAKbC,MALa;IAMbC,WAAW,GAAG,UAND;IAObC,SAPa;IAQbC,UARa;IASbC;EATa,CAWT;EAAA,IADDC,MACC;;EACJ,MAAMC,KAAK,GAAGlB,QAAQ,EAAtB;EAEA;EAEA;;EACA,MAAMmB,YAAY,GAAGvB,OAAO,CAC1B;IAAA;;IAAA,OAAO,CAACG,KAAK,WAACW,IAAI,CAAC,CAAD,CAAL,2CAAC,OAASU,WAAV,CAAN,GAA+BV,IAAI,CAAC,CAAD,CAAJ,CAAQU,WAAR,CAAoBC,WAApB,OAAsC,GAArE,GAA2E,KAAlF;EAAA,CAD0B,EAE1B,CAACX,IAAD,CAF0B,CAA5B;EAKA,MAAMY,WAAW,GAAG1B,OAAO,CACzB,MAAMO,mBAAmB,CAACQ,MAAD,EAASO,KAAT,EAAgBC,YAAhB,EAA8BJ,UAA9B,EAA0CC,UAA1C,CADA,EAEzB,CAACG,YAAD,EAAeR,MAAf,EAAuBO,KAAvB,EAA8BH,UAA9B,EAA0CC,UAA1C,CAFyB,CAA3B;EAKA,MAAMO,WAAW,GAAG3B,OAAO,CAAC,MAAMQ,mBAAmB,CAACQ,MAAD,CAA1B,EAAoC,CAACA,MAAD,CAApC,CAA3B;EAEA,MAAMY,SAAS,GAAGX,WAAW,KAAK,QAAlC;EAEA;;EAEA,MAAM,CAACY,OAAD,EAAUC,UAAV,IAAwB/B,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM,CAACgC,WAAD,EAAcC,cAAd,IAAgCjC,QAAQ,CAAC;IAAEkC,CAAC,EAAE,CAAL;IAAQC,CAAC,EAAE;EAAX,CAAD,CAA9C;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCrC,QAAQ,EAA9C;EAEA;EAEA;;EACA,MAAMsC,OAAO,GAAGpC,WAAW,CACxBqC,KAAD,IAAW;IACT,MAAM;MAAEC;IAAF,IAAaD,KAAnB;IAEA,MAAME,cAAc,GAAG;MACrBC,KAAK,EAAE,EADc;MAErBC,QAAQ,EAAE;IAFW,CAAvB;IAKAH,MAAM,CAACI,OAAP,CAAe,CAACC,CAAD,EAAIC,CAAJ,KAAU;MAAA;;MACvB,MAAMC,KAAK,GAAGF,CAAC,CAACG,QAAhB;MACA,MAAMC,OAAO,GAAGJ,CAAC,CAACK,WAAlB;MAEA,IAAIJ,CAAC,KAAK,CAAV,EAAaL,cAAc,CAACC,KAAf,GAAuBlB,YAAY,GAAGqB,CAAC,CAACV,CAAL,GAASU,CAAC,CAACX,CAAF,IAAOa,KAAK,CAACI,IAAzD;MAEbV,cAAc,CAACE,QAAf,CAAwBS,IAAxB,CAA6B;QAC3BC,KAAK,EAAE,kBAAAN,KAAK,CAACO,MAAN,gEAAcD,KAAd,qBAAuBN,KAAK,CAACQ,IAA7B,gDAAuB,YAAYF,KAAnC,KAA4CR,CAAC,CAACQ,KAD1B;QAE3BF,IAAI,EAAE,kBAAAJ,KAAK,CAACS,MAAN,gEAAeP,OAAf,MAA2BF,KAAK,CAACI,IAFZ;QAG3BM,KAAK,EAAEjC,YAAY,GAAGqB,CAAC,CAACX,CAAL,GAASW,CAAC,CAACV,CAAF,IAAOU,CAAC,CAACY;MAHV,CAA7B;IAKD,CAXD;IAaApB,cAAc,CAACI,cAAD,CAAd;IACAV,UAAU,CAAC,IAAD,CAAV;EACD,CAxBwB,EAyBzB,CAACP,YAAD,CAzByB,CAA3B;EA4BA,MAAMkC,SAAS,GAAGxD,WAAW,CAAC,MAAM;IAClC6B,UAAU,CAAC,KAAD,CAAV;EACD,CAF4B,EAE1B,EAF0B,CAA7B;EAIA,MAAM4B,WAAW,GAAGzD,WAAW,CAAEqC,KAAD,IAAW;IACzCN,cAAc,CAAC;MACbC,CAAC,EAAEK,KAAK,CAACqB,OADI;MAEbzB,CAAC,EAAEI,KAAK,CAACsB;IAFI,CAAD,CAAd;EAID,CAL8B,EAK5B,EAL4B,CAA/B;EAOA,oBACE,0CACG/B,OAAO,iBAAI,oBAAC,OAAD;IAAS,WAAW,EAAEE,WAAtB;IAAmC,IAAI,EAAEI,WAAzC;IAAsD,SAAS,EAAEP;EAAjE,EADd,eAEE;IAAK,EAAE,EAAEhB,EAAT;IAAa,SAAS,EAAEC,OAAO,CAACgD;EAAhC,gBACE;IAAK,WAAW,EAAEH;EAAlB,gBACE,oBAAC,IAAD;IACE,IAAI,EAAE5C,IADR;IAEE,MAAM,EAAEY,WAFV;IAGE,MAAM,EAAEC,WAHV;IAIE,OAAO,EAAEU,OAJX;IAKE,SAAS,EAAEoB,SALb;IAME,SAAS,EAAEvC;EANb,GAOMG,MAPN,EADF,CADF,CAFF,CADF;AAkBD,CAjGD;;AAmGA,wCAAAV,KAAK,CAACmD,SAAN,GAAkB;EAChB;AACF;AACA;EACElD,EAAE,EAAEV,SAAS,CAAC6D,MAJE;;EAKhB;AACF;AACA;EACElD,OAAO,EAAEX,SAAS,CAAC8D,KAAV,CAAgB;IACvBH,IAAI,EAAE3D,SAAS,CAAC6D;EADO,CAAhB,CARO;;EAYhB;AACF;AACA;EACEjD,IAAI,EAAEZ,SAAS,CAAC+D,OAAV,CAAkB/D,SAAS,CAACgE,UAAV,CAAqBC,MAArB,CAAlB,EAAgDC,UAftC;;EAgBhB;AACF;AACA;EACErD,MAAM,EAAEb,SAAS,CAACgE,UAAV,CAAqBC,MAArB,EAA6BC,UAnBrB;;EAoBhB;AACF;AACA;EACEpD,MAAM,EAAEd,SAAS,CAACgE,UAAV,CAAqBC,MAArB,CAvBQ;;EAwBhB;AACF;AACA;EACElD,WAAW,EAAEf,SAAS,CAACmE,KAAV,CAAgB,CAAC,QAAD,EAAW,UAAX,CAAhB,CA3BG;;EA4BhB;AACF;AACA;EACEnD,SAAS,EAAEhB,SAAS,CAACoE,IA/BL;;EAgChB;AACF;AACA;EACEnD,UAAU,EAAEjB,SAAS,CAAC6D,MAnCN;;EAoChB;AACF;AACA;EACE3C,UAAU,EAAElB,SAAS,CAAC6D,MAvCN;;EAwChB;AACF;AACA;EACEQ,QAAQ,EAAErE,SAAS,CAAC6D;AA3CJ,CAAlB;AA8CA,eAAe1D,UAAU,CAACK,MAAD,EAAS;EAAEwC,IAAI,EAAE;AAAR,CAAT,CAAV,CAAwCvC,KAAxC,CAAf"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@material-ui/core";
|
|
3
|
+
import type { Config, Layout, Data as PlotlyPlotData } from "plotly.js";
|
|
4
|
+
|
|
5
|
+
export type PlotData = PlotlyPlotData;
|
|
6
|
+
export type PlotLayout = Layout;
|
|
7
|
+
export type PlotConfig = Config;
|
|
8
|
+
|
|
9
|
+
export type HvPlotClassKey = "";
|
|
10
|
+
|
|
11
|
+
export interface HvPlotProps
|
|
12
|
+
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvPlotClassKey> {
|
|
13
|
+
/**
|
|
14
|
+
* Plotly data object.
|
|
15
|
+
*/
|
|
16
|
+
data: PlotData[];
|
|
17
|
+
/**
|
|
18
|
+
* Plotly layout object.
|
|
19
|
+
*/
|
|
20
|
+
layout?: Partial<PlotLayout>;
|
|
21
|
+
/**
|
|
22
|
+
* Plotly config object.
|
|
23
|
+
*/
|
|
24
|
+
config?: Partial<PlotConfig>;
|
|
25
|
+
/**
|
|
26
|
+
* OnHover function.
|
|
27
|
+
*/
|
|
28
|
+
onHover?: (data: PlotData) => void;
|
|
29
|
+
/**
|
|
30
|
+
* OnUnHover function.
|
|
31
|
+
*/
|
|
32
|
+
onUnHover?: (data: PlotData) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Function to be call after plot render.
|
|
35
|
+
*/
|
|
36
|
+
afterPlot?: (data: PlotData, ref: any) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Plot revision
|
|
39
|
+
*/
|
|
40
|
+
revision?: number;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export default function HvPlot(props: HvPlotProps): JSX.Element | null;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
const _excluded = ["data", "layout", "config", "revision", "onHover", "onUnHover", "afterPlot"];
|
|
4
|
+
import React, { useLayoutEffect, useRef, useCallback } from "react";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
import Plotly from "plotly.js-basic-dist";
|
|
7
|
+
import createPlotlyComponent from "react-plotly.js/factory";
|
|
8
|
+
import { withStyles } from "@material-ui/core";
|
|
9
|
+
import styles from "./styles";
|
|
10
|
+
const PlotGraph = createPlotlyComponent(Plotly);
|
|
11
|
+
const plotGraphStyle = {
|
|
12
|
+
position: "relative"
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const Plot = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
data,
|
|
18
|
+
layout,
|
|
19
|
+
config,
|
|
20
|
+
revision = 0,
|
|
21
|
+
onHover,
|
|
22
|
+
onUnHover,
|
|
23
|
+
afterPlot
|
|
24
|
+
} = _ref,
|
|
25
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
|
|
27
|
+
const ref = useRef(null);
|
|
28
|
+
/* Callbacks */
|
|
29
|
+
|
|
30
|
+
const afterPlotInternal = useCallback(() => {
|
|
31
|
+
afterPlot === null || afterPlot === void 0 ? void 0 : afterPlot(ref);
|
|
32
|
+
}, [afterPlot]);
|
|
33
|
+
/* Effects */
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Call in the first render because react-plotly.js won't do so.
|
|
37
|
+
* (https://github.com/plotly/react-plotly.js/blob/bd15ca98be12b159633fb57c4ea762cb7a64c3a7/src/factory.js#L88)
|
|
38
|
+
*/
|
|
39
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
|
+
|
|
41
|
+
useLayoutEffect(afterPlotInternal, []);
|
|
42
|
+
return /*#__PURE__*/React.createElement(PlotGraph, _extends({
|
|
43
|
+
ref: ref,
|
|
44
|
+
data: data,
|
|
45
|
+
layout: layout,
|
|
46
|
+
config: config,
|
|
47
|
+
revision: revision,
|
|
48
|
+
onHover: onHover,
|
|
49
|
+
onUnhover: onUnHover,
|
|
50
|
+
onAfterPlot: afterPlot != null ? afterPlotInternal : null,
|
|
51
|
+
style: plotGraphStyle
|
|
52
|
+
}, others));
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
process.env.NODE_ENV !== "production" ? Plot.propTypes = {
|
|
56
|
+
/**
|
|
57
|
+
* Plotly data object.
|
|
58
|
+
*/
|
|
59
|
+
data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Plotly layout object.
|
|
63
|
+
*/
|
|
64
|
+
layout: PropTypes.instanceOf(Object).isRequired,
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Plotly config object.
|
|
68
|
+
*/
|
|
69
|
+
config: PropTypes.instanceOf(Object).isRequired,
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* OnHover function.
|
|
73
|
+
*/
|
|
74
|
+
onHover: PropTypes.func,
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* OnUnHover function.
|
|
78
|
+
*/
|
|
79
|
+
onUnHover: PropTypes.func,
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Function to be call after plot render.
|
|
83
|
+
*/
|
|
84
|
+
afterPlot: PropTypes.func,
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Plot revision.
|
|
88
|
+
*/
|
|
89
|
+
revision: PropTypes.number
|
|
90
|
+
} : void 0;
|
|
91
|
+
export default withStyles(styles, {
|
|
92
|
+
name: "HvChartPlot"
|
|
93
|
+
})(Plot);
|
|
94
|
+
//# sourceMappingURL=Plot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Plot.js","names":["React","useLayoutEffect","useRef","useCallback","PropTypes","Plotly","createPlotlyComponent","withStyles","styles","PlotGraph","plotGraphStyle","position","Plot","data","layout","config","revision","onHover","onUnHover","afterPlot","others","ref","afterPlotInternal","propTypes","arrayOf","instanceOf","Object","isRequired","func","number","name"],"sources":["../../../../src/Chart/Plot/Plot.js"],"sourcesContent":["import React, { useLayoutEffect, useRef, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Plotly from \"plotly.js-basic-dist\";\nimport createPlotlyComponent from \"react-plotly.js/factory\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst PlotGraph = createPlotlyComponent(Plotly);\n\nconst plotGraphStyle = { position: \"relative\" };\n\nconst Plot = ({ data, layout, config, revision = 0, onHover, onUnHover, afterPlot, ...others }) => {\n const ref = useRef(null);\n\n /* Callbacks */\n\n const afterPlotInternal = useCallback(() => {\n afterPlot?.(ref);\n }, [afterPlot]);\n\n /* Effects */\n\n /**\n * Call in the first render because react-plotly.js won't do so.\n * (https://github.com/plotly/react-plotly.js/blob/bd15ca98be12b159633fb57c4ea762cb7a64c3a7/src/factory.js#L88)\n */\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(afterPlotInternal, []);\n\n return (\n <PlotGraph\n ref={ref}\n data={data}\n layout={layout}\n config={config}\n revision={revision}\n onHover={onHover}\n onUnhover={onUnHover}\n onAfterPlot={afterPlot != null ? afterPlotInternal : null}\n style={plotGraphStyle}\n {...others}\n />\n );\n};\n\nPlot.propTypes = {\n /**\n * Plotly data object.\n */\n data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n /**\n * Plotly layout object.\n */\n layout: PropTypes.instanceOf(Object).isRequired,\n /**\n * Plotly config object.\n */\n config: PropTypes.instanceOf(Object).isRequired,\n /**\n * OnHover function.\n */\n onHover: PropTypes.func,\n /**\n * OnUnHover function.\n */\n onUnHover: PropTypes.func,\n /**\n * Function to be call after plot render.\n */\n afterPlot: PropTypes.func,\n /**\n * Plot revision.\n */\n revision: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvChartPlot\" })(Plot);\n"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,eAAhB,EAAiCC,MAAjC,EAAyCC,WAAzC,QAA4D,OAA5D;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,sBAAnB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,MAAMC,SAAS,GAAGH,qBAAqB,CAACD,MAAD,CAAvC;AAEA,MAAMK,cAAc,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAAvB;;AAEA,MAAMC,IAAI,GAAG,QAAsF;EAAA,IAArF;IAAEC,IAAF;IAAQC,MAAR;IAAgBC,MAAhB;IAAwBC,QAAQ,GAAG,CAAnC;IAAsCC,OAAtC;IAA+CC,SAA/C;IAA0DC;EAA1D,CAAqF;EAAA,IAAbC,MAAa;;EACjG,MAAMC,GAAG,GAAGnB,MAAM,CAAC,IAAD,CAAlB;EAEA;;EAEA,MAAMoB,iBAAiB,GAAGnB,WAAW,CAAC,MAAM;IAC1CgB,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAGE,GAAH,CAAT;EACD,CAFoC,EAElC,CAACF,SAAD,CAFkC,CAArC;EAIA;;EAEA;AACF;AACA;AACA;EACE;;EACAlB,eAAe,CAACqB,iBAAD,EAAoB,EAApB,CAAf;EAEA,oBACE,oBAAC,SAAD;IACE,GAAG,EAAED,GADP;IAEE,IAAI,EAAER,IAFR;IAGE,MAAM,EAAEC,MAHV;IAIE,MAAM,EAAEC,MAJV;IAKE,QAAQ,EAAEC,QALZ;IAME,OAAO,EAAEC,OANX;IAOE,SAAS,EAAEC,SAPb;IAQE,WAAW,EAAEC,SAAS,IAAI,IAAb,GAAoBG,iBAApB,GAAwC,IARvD;IASE,KAAK,EAAEZ;EATT,GAUMU,MAVN,EADF;AAcD,CAhCD;;AAkCA,wCAAAR,IAAI,CAACW,SAAL,GAAiB;EACf;AACF;AACA;EACEV,IAAI,EAAET,SAAS,CAACoB,OAAV,CAAkBpB,SAAS,CAACqB,UAAV,CAAqBC,MAArB,CAAlB,EAAgDC,UAJvC;;EAKf;AACF;AACA;EACEb,MAAM,EAAEV,SAAS,CAACqB,UAAV,CAAqBC,MAArB,EAA6BC,UARtB;;EASf;AACF;AACA;EACEZ,MAAM,EAAEX,SAAS,CAACqB,UAAV,CAAqBC,MAArB,EAA6BC,UAZtB;;EAaf;AACF;AACA;EACEV,OAAO,EAAEb,SAAS,CAACwB,IAhBJ;;EAiBf;AACF;AACA;EACEV,SAAS,EAAEd,SAAS,CAACwB,IApBN;;EAqBf;AACF;AACA;EACET,SAAS,EAAEf,SAAS,CAACwB,IAxBN;;EAyBf;AACF;AACA;EACEZ,QAAQ,EAAEZ,SAAS,CAACyB;AA5BL,CAAjB;AA+BA,eAAetB,UAAU,CAACC,MAAD,EAAS;EAAEsB,IAAI,EAAE;AAAR,CAAT,CAAV,CAA4ClB,IAA5C,CAAf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/Chart/Plot/index.js"],"sourcesContent":["export { default } from \"./Plot\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles"],"sources":["../../../../src/Chart/Plot/styles.js"],"sourcesContent":["const styles = {};\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,EAAf;AAEA,eAAeA,MAAf"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
2
|
+
import React, { memo } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import { withStyles } from "@material-ui/core";
|
|
5
|
+
import Typography from "../../../Typography";
|
|
6
|
+
import styles from "./styles";
|
|
7
|
+
|
|
8
|
+
const MultiTooltip = ({
|
|
9
|
+
classes,
|
|
10
|
+
data
|
|
11
|
+
}) => {
|
|
12
|
+
var _data$elements;
|
|
13
|
+
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
15
|
+
className: classes.root
|
|
16
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
17
|
+
className: classes.title
|
|
18
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
|
|
19
|
+
variant: "highlightText"
|
|
20
|
+
}, data.title))), /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
className: classes.valuesContainer
|
|
22
|
+
}, data === null || data === void 0 ? void 0 : (_data$elements = data.elements) === null || _data$elements === void 0 ? void 0 : _data$elements.map(element => /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
key: element.name,
|
|
24
|
+
className: classes.values
|
|
25
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
className: classes.valueNameWrapper
|
|
27
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
className: classes.color,
|
|
29
|
+
style: {
|
|
30
|
+
backgroundColor: element.color
|
|
31
|
+
}
|
|
32
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: classes.separatorColor
|
|
34
|
+
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
|
|
35
|
+
variant: "highlightText"
|
|
36
|
+
}, element.name)), /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: classes.separator
|
|
38
|
+
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, null, element.value))))));
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
process.env.NODE_ENV !== "production" ? MultiTooltip.propTypes = {
|
|
42
|
+
/**
|
|
43
|
+
* A Jss Object used to override or extend the styles applied.
|
|
44
|
+
*/
|
|
45
|
+
classes: PropTypes.shape({
|
|
46
|
+
/**
|
|
47
|
+
* Styles applied to the root.
|
|
48
|
+
*/
|
|
49
|
+
root: PropTypes.string,
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Styles applied to the title.
|
|
53
|
+
*/
|
|
54
|
+
title: PropTypes.string,
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Styles applied to the values container.
|
|
58
|
+
*/
|
|
59
|
+
valuesContainer: PropTypes.string,
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Styling applied to the elements describing a data.
|
|
63
|
+
*/
|
|
64
|
+
valueNameWrapper: PropTypes.string,
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Styles applied to the values.
|
|
68
|
+
*/
|
|
69
|
+
values: PropTypes.string,
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Styles applied to the color.
|
|
73
|
+
*/
|
|
74
|
+
color: PropTypes.string,
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Styles applied to the separator between color and title.
|
|
78
|
+
*/
|
|
79
|
+
separatorColor: PropTypes.string,
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Styles applied to the separator.
|
|
83
|
+
*/
|
|
84
|
+
separator: PropTypes.string
|
|
85
|
+
}).isRequired,
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Data of the tooltip.
|
|
89
|
+
*/
|
|
90
|
+
data: PropTypes.shape({
|
|
91
|
+
/**
|
|
92
|
+
* Styles applied to the barchart root class.
|
|
93
|
+
*/
|
|
94
|
+
title: PropTypes.string,
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Values of tooltip
|
|
98
|
+
*/
|
|
99
|
+
elements: PropTypes.arrayOf(PropTypes.shape({
|
|
100
|
+
/**
|
|
101
|
+
* Color (in hex).
|
|
102
|
+
*/
|
|
103
|
+
color: PropTypes.string,
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Name.
|
|
107
|
+
*/
|
|
108
|
+
name: PropTypes.string,
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Value.
|
|
112
|
+
*/
|
|
113
|
+
value: PropTypes.number
|
|
114
|
+
}))
|
|
115
|
+
}).isRequired
|
|
116
|
+
} : void 0;
|
|
117
|
+
|
|
118
|
+
const arePropsEqual = (prevProps, nextProps) => prevProps.data === nextProps.data;
|
|
119
|
+
|
|
120
|
+
export default withStyles(styles, {
|
|
121
|
+
name: "HvChartMultiTooltip"
|
|
122
|
+
})( /*#__PURE__*/memo(MultiTooltip, arePropsEqual));
|
|
123
|
+
//# sourceMappingURL=MultiTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiTooltip.js","names":["React","memo","PropTypes","withStyles","Typography","styles","MultiTooltip","classes","data","root","title","valuesContainer","elements","map","element","name","values","valueNameWrapper","color","backgroundColor","separatorColor","separator","value","propTypes","shape","string","isRequired","arrayOf","number","arePropsEqual","prevProps","nextProps"],"sources":["../../../../../src/Chart/Tooltip/MultiTooltip/MultiTooltip.js"],"sourcesContent":["import React, { memo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Typography from \"../../../Typography\";\nimport styles from \"./styles\";\n\nconst MultiTooltip = ({ classes, data }) => (\n <div className={classes.root}>\n <div className={classes.title}>\n <div>\n <Typography variant=\"highlightText\">{data.title}</Typography>\n </div>\n </div>\n <div className={classes.valuesContainer}>\n {data?.elements?.map((element) => (\n <div key={element.name} className={classes.values}>\n <div className={classes.valueNameWrapper}>\n <div className={classes.color} style={{ backgroundColor: element.color }} />\n <div className={classes.separatorColor} />\n <div>\n <Typography variant=\"highlightText\">{element.name}</Typography>\n </div>\n <div className={classes.separator} />\n </div>\n <div>\n <Typography>{element.value}</Typography>\n </div>\n </div>\n ))}\n </div>\n </div>\n);\n\nMultiTooltip.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the title.\n */\n title: PropTypes.string,\n /**\n * Styles applied to the values container.\n */\n valuesContainer: PropTypes.string,\n /**\n * Styling applied to the elements describing a data.\n */\n valueNameWrapper: PropTypes.string,\n /**\n * Styles applied to the values.\n */\n values: PropTypes.string,\n /**\n * Styles applied to the color.\n */\n color: PropTypes.string,\n /**\n * Styles applied to the separator between color and title.\n */\n separatorColor: PropTypes.string,\n /**\n * Styles applied to the separator.\n */\n separator: PropTypes.string,\n }).isRequired,\n /**\n * Data of the tooltip.\n */\n data: PropTypes.shape({\n /**\n * Styles applied to the barchart root class.\n */\n title: PropTypes.string,\n /**\n * Values of tooltip\n */\n elements: PropTypes.arrayOf(\n PropTypes.shape({\n /**\n * Color (in hex).\n */\n color: PropTypes.string,\n /**\n * Name.\n */\n name: PropTypes.string,\n /**\n * Value.\n */\n value: PropTypes.number,\n })\n ),\n }).isRequired,\n};\n\nconst arePropsEqual = (prevProps, nextProps) => prevProps.data === nextProps.data;\n\nexport default withStyles(styles, { name: \"HvChartMultiTooltip\" })(\n memo(MultiTooltip, arePropsEqual)\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/Chart/Tooltip/MultiTooltip/index.js"],"sourcesContent":["export { default } from \"./MultiTooltip\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
const styles = theme => ({
|
|
2
|
+
root: {
|
|
3
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
4
|
+
width: "fit-content",
|
|
5
|
+
boxShadow: theme.hv.shadows[1],
|
|
6
|
+
zIndex: 100
|
|
7
|
+
},
|
|
8
|
+
title: {
|
|
9
|
+
padding: theme.hvSpacing("15px", "sm"),
|
|
10
|
+
borderBottom: `3px solid ${theme.hv.palette.atmosphere.atmo2}`
|
|
11
|
+
},
|
|
12
|
+
valuesContainer: {
|
|
13
|
+
padding: theme.hv.spacing.sm
|
|
14
|
+
},
|
|
15
|
+
values: {
|
|
16
|
+
display: "flex",
|
|
17
|
+
justifyContent: "space-between",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
paddingBottom: theme.hv.spacing.sm,
|
|
20
|
+
"&:last-child": {
|
|
21
|
+
paddingBottom: 0
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
valueNameWrapper: {
|
|
25
|
+
display: "flex",
|
|
26
|
+
alignItems: "center"
|
|
27
|
+
},
|
|
28
|
+
color: {
|
|
29
|
+
width: theme.hv.spacing.xs,
|
|
30
|
+
height: theme.hv.spacing.xs
|
|
31
|
+
},
|
|
32
|
+
separator: {
|
|
33
|
+
width: theme.hv.spacing.xs
|
|
34
|
+
},
|
|
35
|
+
separatorColor: {
|
|
36
|
+
width: "5px"
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
export default styles;
|
|
41
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","backgroundColor","hv","palette","atmosphere","atmo1","width","boxShadow","shadows","zIndex","title","padding","hvSpacing","borderBottom","atmo2","valuesContainer","spacing","sm","values","display","justifyContent","alignItems","paddingBottom","valueNameWrapper","color","xs","height","separator","separatorColor"],"sources":["../../../../../src/Chart/Tooltip/MultiTooltip/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n width: \"fit-content\",\n boxShadow: theme.hv.shadows[1],\n zIndex: 100,\n },\n title: {\n padding: theme.hvSpacing(\"15px\", \"sm\"),\n borderBottom: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n },\n valuesContainer: {\n padding: theme.hv.spacing.sm,\n },\n values: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingBottom: theme.hv.spacing.sm,\n \"&:last-child\": {\n paddingBottom: 0,\n },\n },\n valueNameWrapper: {\n display: \"flex\",\n alignItems: \"center\",\n },\n color: {\n width: theme.hv.spacing.xs,\n height: theme.hv.spacing.xs,\n },\n separator: {\n width: theme.hv.spacing.xs,\n },\n separatorColor: {\n width: \"5px\",\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJC,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KADzC;IAEJC,KAAK,EAAE,aAFH;IAGJC,SAAS,EAAER,KAAK,CAACG,EAAN,CAASM,OAAT,CAAiB,CAAjB,CAHP;IAIJC,MAAM,EAAE;EAJJ,CADmB;EAOzBC,KAAK,EAAE;IACLC,OAAO,EAAEZ,KAAK,CAACa,SAAN,CAAgB,MAAhB,EAAwB,IAAxB,CADJ;IAELC,YAAY,EAAG,aAAYd,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BU,KAAM;EAFxD,CAPkB;EAWzBC,eAAe,EAAE;IACfJ,OAAO,EAAEZ,KAAK,CAACG,EAAN,CAASc,OAAT,CAAiBC;EADX,CAXQ;EAczBC,MAAM,EAAE;IACNC,OAAO,EAAE,MADH;IAENC,cAAc,EAAE,eAFV;IAGNC,UAAU,EAAE,QAHN;IAINC,aAAa,EAAEvB,KAAK,CAACG,EAAN,CAASc,OAAT,CAAiBC,EAJ1B;IAKN,gBAAgB;MACdK,aAAa,EAAE;IADD;EALV,CAdiB;EAuBzBC,gBAAgB,EAAE;IAChBJ,OAAO,EAAE,MADO;IAEhBE,UAAU,EAAE;EAFI,CAvBO;EA2BzBG,KAAK,EAAE;IACLlB,KAAK,EAAEP,KAAK,CAACG,EAAN,CAASc,OAAT,CAAiBS,EADnB;IAELC,MAAM,EAAE3B,KAAK,CAACG,EAAN,CAASc,OAAT,CAAiBS;EAFpB,CA3BkB;EA+BzBE,SAAS,EAAE;IACTrB,KAAK,EAAEP,KAAK,CAACG,EAAN,CAASc,OAAT,CAAiBS;EADf,CA/Bc;EAkCzBG,cAAc,EAAE;IACdtB,KAAK,EAAE;EADO;AAlCS,CAAZ,CAAf;;AAuCA,eAAeR,MAAf"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React, { memo } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import { withStyles } from "@material-ui/core";
|
|
4
|
+
import Typography from "../../../Typography";
|
|
5
|
+
import styles from "./styles";
|
|
6
|
+
|
|
7
|
+
const SingleTooltip = ({
|
|
8
|
+
classes,
|
|
9
|
+
title,
|
|
10
|
+
value
|
|
11
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
12
|
+
className: classes.root
|
|
13
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
|
|
14
|
+
variant: "highlightText"
|
|
15
|
+
}, title)), /*#__PURE__*/React.createElement("div", {
|
|
16
|
+
className: classes.separator
|
|
17
|
+
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, null, value)));
|
|
18
|
+
|
|
19
|
+
process.env.NODE_ENV !== "production" ? SingleTooltip.propTypes = {
|
|
20
|
+
/**
|
|
21
|
+
* A Jss Object used to override or extend the styles applied.
|
|
22
|
+
*/
|
|
23
|
+
classes: PropTypes.shape({
|
|
24
|
+
/**
|
|
25
|
+
* Styles applied to the root class.
|
|
26
|
+
*/
|
|
27
|
+
root: PropTypes.string,
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Styles applied to the separator between title and value.
|
|
31
|
+
*/
|
|
32
|
+
separator: PropTypes.string
|
|
33
|
+
}).isRequired,
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Title of the chart.
|
|
37
|
+
*/
|
|
38
|
+
title: PropTypes.string.isRequired,
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Value of the chart.
|
|
42
|
+
*/
|
|
43
|
+
value: PropTypes.number.isRequired
|
|
44
|
+
} : void 0;
|
|
45
|
+
|
|
46
|
+
const arePropsEqual = (prevProps, nextProps) => prevProps.title === nextProps.title && prevProps.value === nextProps.value;
|
|
47
|
+
|
|
48
|
+
export default withStyles(styles, {
|
|
49
|
+
name: "HvChartSingleTooltip"
|
|
50
|
+
})( /*#__PURE__*/memo(SingleTooltip, arePropsEqual));
|
|
51
|
+
//# sourceMappingURL=SingleTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SingleTooltip.js","names":["React","memo","PropTypes","withStyles","Typography","styles","SingleTooltip","classes","title","value","root","separator","propTypes","shape","string","isRequired","number","arePropsEqual","prevProps","nextProps","name"],"sources":["../../../../../src/Chart/Tooltip/SingleTooltip/SingleTooltip.js"],"sourcesContent":["import React, { memo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Typography from \"../../../Typography\";\nimport styles from \"./styles\";\n\nconst SingleTooltip = ({ classes, title, value }) => (\n <div className={classes.root}>\n <div>\n <Typography variant=\"highlightText\">{title}</Typography>\n </div>\n <div className={classes.separator} />\n <div>\n <Typography>{value}</Typography>\n </div>\n </div>\n);\n\nSingleTooltip.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the separator between title and value.\n */\n separator: PropTypes.string,\n }).isRequired,\n /**\n * Title of the chart.\n */\n title: PropTypes.string.isRequired,\n /**\n * Value of the chart.\n */\n value: PropTypes.number.isRequired,\n};\n\nconst arePropsEqual = (prevProps, nextProps) =>\n prevProps.title === nextProps.title && prevProps.value === nextProps.value;\n\nexport default withStyles(styles, { name: \"HvChartSingleTooltip\" })(\n memo(SingleTooltip, arePropsEqual)\n);\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,QAA4B,OAA5B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,aAAa,GAAG,CAAC;EAAEC,OAAF;EAAWC,KAAX;EAAkBC;AAAlB,CAAD,kBACpB;EAAK,SAAS,EAAEF,OAAO,CAACG;AAAxB,gBACE,8CACE,oBAAC,UAAD;EAAY,OAAO,EAAC;AAApB,GAAqCF,KAArC,CADF,CADF,eAIE;EAAK,SAAS,EAAED,OAAO,CAACI;AAAxB,EAJF,eAKE,8CACE,oBAAC,UAAD,QAAaF,KAAb,CADF,CALF,CADF;;AAYA,wCAAAH,aAAa,CAACM,SAAd,GAA0B;EACxB;AACF;AACA;EACEL,OAAO,EAAEL,SAAS,CAACW,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAER,SAAS,CAACY,MAJO;;IAKvB;AACJ;AACA;IACIH,SAAS,EAAET,SAAS,CAACY;EARE,CAAhB,EASNC,UAbqB;;EAcxB;AACF;AACA;EACEP,KAAK,EAAEN,SAAS,CAACY,MAAV,CAAiBC,UAjBA;;EAkBxB;AACF;AACA;EACEN,KAAK,EAAEP,SAAS,CAACc,MAAV,CAAiBD;AArBA,CAA1B;;AAwBA,MAAME,aAAa,GAAG,CAACC,SAAD,EAAYC,SAAZ,KACpBD,SAAS,CAACV,KAAV,KAAoBW,SAAS,CAACX,KAA9B,IAAuCU,SAAS,CAACT,KAAV,KAAoBU,SAAS,CAACV,KADvE;;AAGA,eAAeN,UAAU,CAACE,MAAD,EAAS;EAAEe,IAAI,EAAE;AAAR,CAAT,CAAV,eACbnB,IAAI,CAACK,aAAD,EAAgBW,aAAhB,CADS,CAAf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/Chart/Tooltip/SingleTooltip/index.js"],"sourcesContent":["export { default } from \"./SingleTooltip\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const styles = theme => ({
|
|
2
|
+
root: {
|
|
3
|
+
padding: theme.hv.spacing.sm,
|
|
4
|
+
display: "flex",
|
|
5
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo1,
|
|
6
|
+
boxShadow: theme.hv.shadows[1],
|
|
7
|
+
width: "fit-content",
|
|
8
|
+
zIndex: 100
|
|
9
|
+
},
|
|
10
|
+
separator: {
|
|
11
|
+
width: theme.hv.spacing.xs
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
export default styles;
|
|
16
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","padding","hv","spacing","sm","display","backgroundColor","palette","atmosphere","atmo1","boxShadow","shadows","width","zIndex","separator","xs"],"sources":["../../../../../src/Chart/Tooltip/SingleTooltip/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n padding: theme.hv.spacing.sm,\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n boxShadow: theme.hv.shadows[1],\n width: \"fit-content\",\n zIndex: 100,\n },\n separator: {\n width: theme.hv.spacing.xs,\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJC,OAAO,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,EADtB;IAEJC,OAAO,EAAE,MAFL;IAGJC,eAAe,EAAEP,KAAK,CAACG,EAAN,CAASK,OAAT,CAAiBC,UAAjB,CAA4BC,KAHzC;IAIJC,SAAS,EAAEX,KAAK,CAACG,EAAN,CAASS,OAAT,CAAiB,CAAjB,CAJP;IAKJC,KAAK,EAAE,aALH;IAMJC,MAAM,EAAE;EANJ,CADmB;EASzBC,SAAS,EAAE;IACTF,KAAK,EAAEb,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBY;EADf;AATc,CAAZ,CAAf;;AAcA,eAAejB,MAAf"}
|