@hitachivantara/uikit-react-core 3.67.2 → 3.67.5
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/AppSwitcher/styles.js +1 -1
- package/dist/AppSwitcher/styles.js.map +1 -1
- package/dist/Barchart/Barchart.js +3 -1
- package/dist/Barchart/Barchart.js.map +1 -1
- package/dist/legacy/AppSwitcher/styles.js +1 -1
- package/dist/legacy/AppSwitcher/styles.js.map +1 -1
- package/dist/legacy/Barchart/Barchart.js +3 -1
- package/dist/legacy/Barchart/Barchart.js.map +1 -1
- package/dist/modern/AppSwitcher/styles.js +1 -1
- package/dist/modern/AppSwitcher/styles.js.map +1 -1
- package/dist/modern/Barchart/Barchart.js +3 -1
- package/dist/modern/Barchart/Barchart.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width:
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width: 640,\n },\n fluid: {},\n\n closed: {\n display: \"none\",\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.hv.shadows[1],\n },\n\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n },\n\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // we need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n\n marginTop: \"auto\",\n\n height: 52,\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n\n ...theme.hv.typography.highlightText,\n },\n\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTypography: {},\n itemIcon: {},\n itemTitle: {},\n itemInfo: {},\n});\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;EAAA,OAAY;IACzBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,aAAa,EAAE,QAFX;MAIJC,QAAQ,EAAE,QAJN;MAMJ;MACAC,OAAO,YAAKL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA3B,kBAAoCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA1D,gBACLR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CADjB,OAPH;MAWJC,eAAe,EAAET,KAAK,CAACM,EAAN,CAASI,OAAT,CAAiBC,UAAjB,CAA4BC;IAXzC,CADmB;IAezBC,MAAM,EAAE;MACNC,KAAK,EAAE;IADD,CAfiB;IAkBzBC,IAAI,EAAE;MACJD,KAAK,EAAE;IADH,CAlBmB;IAqBzBE,KAAK,EAAE,EArBkB;IAuBzBC,MAAM,EAAE;MACNf,OAAO,EAAE;IADH,CAvBiB;IA0BzBgB,IAAI,EAAE;MACJC,MAAM,EAAE,MADJ;MAEJC,QAAQ,EAAE,UAFN;MAGJC,GAAG,EAAE,MAHD;MAIJC,SAAS,EAAE,QAJP;MAKJC,SAAS,EAAEvB,KAAK,CAACM,EAAN,CAASkB,OAAT,CAAiB,CAAjB;IALP,CA1BmB;IAkCzBC,KAAK,EAAE;MACLC,SAAS,EAAE,EADN;MAGL;MACArB,OAAO,gBAASL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAA1B,gBAAkCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAxD,WAJF;MAMLJ,QAAQ,EAAE,QANL;MAOLuB,UAAU,EAAE,QAPP;MAQLC,YAAY,EAAE;IART,CAlCkB;IA6CzBC,gBAAgB,EAAE;MAChB3B,OAAO,EAAE,MADO;MAEhB4B,QAAQ,EAAE,MAFM;MAGhBC,cAAc,EAAE,YAHA;MAKhBC,SAAS,EAAE,MALK;MAOhB;MACA3B,OAAO,EAAE;IARO,CA7CO;IAwDzB4B,eAAe;MACb/B,OAAO,EAAE,MADI;MAEbgC,UAAU,EAAE,QAFC;MAIbC,SAAS,EAAE,MAJE;MAMbC,MAAM,EAAE,EANK;MAQb;MACA/B,OAAO,YAAKL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA3B,gBAAkCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAxD;IATM,GAWVR,KAAK,CAACM,EAAN,CAAS+B,UAAT,CAAoBC,aAXV,CAxDU;IAsEzBC,IAAI,EAAE,EAtEmB;IAuEzBC,YAAY,EAAE,EAvEW;IAwEzBC,YAAY,EAAE,EAxEW;IAyEzBC,cAAc,EAAE,EAzES;IA0EzBC,QAAQ,EAAE,EA1Ee;IA2EzBC,SAAS,EAAE,EA3Ec;IA4EzBC,QAAQ,EAAE;EA5Ee,CAAZ;AAAA,CAAf;;eA+Ee9C,M"}
|
|
@@ -66,6 +66,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
66
66
|
var MARGIN = 50;
|
|
67
67
|
var MAX_BAR_WIDTH = 90;
|
|
68
68
|
var MIN_BAR_WIDTH = 3;
|
|
69
|
+
var MIN_WIDTH = 75;
|
|
69
70
|
/**
|
|
70
71
|
* A Bar chart is a chart or graph that presents categorical data with rectangular bars.
|
|
71
72
|
*
|
|
@@ -135,8 +136,9 @@ var Barchart = function Barchart(_ref) {
|
|
|
135
136
|
var numberOfGroup = plotData[0].x.length;
|
|
136
137
|
|
|
137
138
|
var _ref$current$el$getBo = ref.current.el.getBoundingClientRect(),
|
|
138
|
-
|
|
139
|
+
boundingRect = _ref$current$el$getBo.width;
|
|
139
140
|
|
|
141
|
+
var width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;
|
|
140
142
|
var plotWidth = width - MARGIN;
|
|
141
143
|
var groupWidth = plotWidth / numberOfGroup;
|
|
142
144
|
var colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Barchart.js","names":["MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","el","getBoundingClientRect","width","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","PropTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","styles","name"],"sources":["../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width } = ref.current.el.getBoundingClientRect();\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,EAAf;AACA,IAAMC,aAAa,GAAG,EAAtB;AACA,IAAMC,aAAa,GAAG,CAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAUX;EAAA,IATJC,EASI,QATJA,EASI;EAAA,IARJC,OAQI,QARJA,OAQI;EAAA,IAPJC,IAOI,QAPJA,IAOI;EAAA,IANJC,MAMI,QANJA,MAMI;EAAA,IALJC,MAKI,QALJA,MAKI;EAAA,4BAJJC,WAII;EAAA,IAJJA,WAII,iCAJU,UAIV;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,KAGJ;EAAA,2BAFJC,UAEI;EAAA,IAFJA,UAEI,gCAFS,KAET;EAAA,IADDC,MACC;;EACJ;EAEA,IAAMC,gBAAgB,GAAG,oBAAQ;IAAA,OAAM,gDAAkBP,IAAlB,EAAwBK,UAAxB,CAAN;EAAA,CAAR,EAAmD,CAACL,IAAD,EAAOK,UAAP,CAAnD,CAAzB;EACA,IAAMG,WAAW,GAAG,oBAClB;IAAA,OAAM,kDAAoBP,MAApB,EAA4BG,KAA5B,EAAmCC,UAAnC,CAAN;EAAA,CADkB,EAElB,CAACJ,MAAD,EAASG,KAAT,EAAgBC,UAAhB,CAFkB,CAApB;EAKA;;EAEA,gBAAkC,qBAASE,gBAAT,CAAlC;EAAA;EAAA,IAAOE,SAAP;EAAA,IAAkBC,YAAlB;EAEA;;;EAEA,IAAMC,WAAW,GAAG,mBAAO,IAAP,CAApB;EACA,sBAAU,YAAM;IACd;IACA;IACA;IACA,IAAI,CAACA,WAAW,CAACC,OAAjB,EAA0B;MACxBF,YAAY,CAACH,gBAAD,CAAZ;IACD;;IAEDI,WAAW,CAACC,OAAZ,GAAsB,KAAtB;EACD,CATD,EASG,CAACL,gBAAD,CATH;EAWA;AACF;AACA;AACA;AACA;;EACE,IAAMM,mBAAmB,GAAG,wBAAY,UAACC,GAAD,EAAS;IAC/C;IACA;IACA,IAAMC,QAAQ,GAAGD,GAAG,CAACF,OAAJ,CAAYI,KAAZ,CAAkBhB,IAAnC;IACA,IAAMiB,UAAU,GAAGH,GAAG,CAACF,OAAJ,CAAYI,KAAZ,CAAkBf,MAArC;;IAEA,IAAIc,QAAQ,CAACG,MAAT,GAAkB,CAAtB,EAAyB;MACvB,IAAQC,OAAR,GAAyCF,UAAzC,CAAQE,OAAR;MAAA,IAAiBC,MAAjB,GAAyCH,UAAzC,CAAiBG,MAAjB;MAAA,IAAyBC,WAAzB,GAAyCJ,UAAzC,CAAyBI,WAAzB;MAEA,IAAMC,OAAO,GAAGH,OAAO,KAAK,OAA5B;MACA,IAAMI,mBAAmB,GAAGD,OAAO,GAAG,CAAH,GAAOP,QAAQ,CAACG,MAAnD;MACA,IAAMM,aAAa,GAAGT,QAAQ,CAAC,CAAD,CAAR,CAAYU,CAAZ,CAAcP,MAApC;;MAEA,
|
|
1
|
+
{"version":3,"file":"Barchart.js","names":["MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","MIN_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","el","getBoundingClientRect","boundingRect","width","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","PropTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","styles","name"],"sources":["../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\nconst MIN_WIDTH = 75;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width: boundingRect } = ref.current.el.getBoundingClientRect();\n const width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width:
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width: 640,\n },\n fluid: {},\n\n closed: {\n display: \"none\",\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.hv.shadows[1],\n },\n\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n },\n\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // we need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n\n marginTop: \"auto\",\n\n height: 52,\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n\n ...theme.hv.typography.highlightText,\n },\n\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTypography: {},\n itemIcon: {},\n itemTitle: {},\n itemInfo: {},\n});\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;EAAA,OAAY;IACzBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,aAAa,EAAE,QAFX;MAIJC,QAAQ,EAAE,QAJN;MAMJ;MACAC,OAAO,YAAKL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA3B,kBAAoCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA1D,gBACLR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CADjB,OAPH;MAWJC,eAAe,EAAET,KAAK,CAACM,EAAN,CAASI,OAAT,CAAiBC,UAAjB,CAA4BC;IAXzC,CADmB;IAezBC,MAAM,EAAE;MACNC,KAAK,EAAE;IADD,CAfiB;IAkBzBC,IAAI,EAAE;MACJD,KAAK,EAAE;IADH,CAlBmB;IAqBzBE,KAAK,EAAE,EArBkB;IAuBzBC,MAAM,EAAE;MACNf,OAAO,EAAE;IADH,CAvBiB;IA0BzBgB,IAAI,EAAE;MACJC,MAAM,EAAE,MADJ;MAEJC,QAAQ,EAAE,UAFN;MAGJC,GAAG,EAAE,MAHD;MAIJC,SAAS,EAAE,QAJP;MAKJC,SAAS,EAAEvB,KAAK,CAACM,EAAN,CAASkB,OAAT,CAAiB,CAAjB;IALP,CA1BmB;IAkCzBC,KAAK,EAAE;MACLC,SAAS,EAAE,EADN;MAGL;MACArB,OAAO,gBAASL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAA1B,gBAAkCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAxD,WAJF;MAMLJ,QAAQ,EAAE,QANL;MAOLuB,UAAU,EAAE,QAPP;MAQLC,YAAY,EAAE;IART,CAlCkB;IA6CzBC,gBAAgB,EAAE;MAChB3B,OAAO,EAAE,MADO;MAEhB4B,QAAQ,EAAE,MAFM;MAGhBC,cAAc,EAAE,YAHA;MAKhBC,SAAS,EAAE,MALK;MAOhB;MACA3B,OAAO,EAAE;IARO,CA7CO;IAwDzB4B,eAAe;MACb/B,OAAO,EAAE,MADI;MAEbgC,UAAU,EAAE,QAFC;MAIbC,SAAS,EAAE,MAJE;MAMbC,MAAM,EAAE,EANK;MAQb;MACA/B,OAAO,YAAKL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAA3B,gBAAkCR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAxD;IATM,GAWVR,KAAK,CAACM,EAAN,CAAS+B,UAAT,CAAoBC,aAXV,CAxDU;IAsEzBC,IAAI,EAAE,EAtEmB;IAuEzBC,YAAY,EAAE,EAvEW;IAwEzBC,YAAY,EAAE,EAxEW;IAyEzBC,cAAc,EAAE,EAzES;IA0EzBC,QAAQ,EAAE,EA1Ee;IA2EzBC,SAAS,EAAE,EA3Ec;IA4EzBC,QAAQ,EAAE;EA5Ee,CAAZ;AAAA,CAAf;;AA+EA,eAAe9C,MAAf"}
|
|
@@ -25,6 +25,7 @@ import styles from "./styles";
|
|
|
25
25
|
var MARGIN = 50;
|
|
26
26
|
var MAX_BAR_WIDTH = 90;
|
|
27
27
|
var MIN_BAR_WIDTH = 3;
|
|
28
|
+
var MIN_WIDTH = 75;
|
|
28
29
|
/**
|
|
29
30
|
* A Bar chart is a chart or graph that presents categorical data with rectangular bars.
|
|
30
31
|
*
|
|
@@ -94,8 +95,9 @@ var Barchart = function Barchart(_ref) {
|
|
|
94
95
|
var numberOfGroup = plotData[0].x.length;
|
|
95
96
|
|
|
96
97
|
var _ref$current$el$getBo = ref.current.el.getBoundingClientRect(),
|
|
97
|
-
|
|
98
|
+
boundingRect = _ref$current$el$getBo.width;
|
|
98
99
|
|
|
100
|
+
var width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;
|
|
99
101
|
var plotWidth = width - MARGIN;
|
|
100
102
|
var groupWidth = plotWidth / numberOfGroup;
|
|
101
103
|
var colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Barchart.js","names":["React","useMemo","useEffect","useState","useCallback","useRef","PropTypes","withStyles","Chart","applyLayoutDefaults","applyDataDefaults","styles","MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","el","getBoundingClientRect","width","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","name"],"sources":["../../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width } = ref.current.el.getBoundingClientRect();\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,SAAzB,EAAoCC,QAApC,EAA8CC,WAA9C,EAA2DC,MAA3D,QAAyE,OAAzE;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,mBAAT,EAA8BC,iBAA9B,QAAuD,2BAAvD;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,IAAMC,MAAM,GAAG,EAAf;AACA,IAAMC,aAAa,GAAG,EAAtB;AACA,IAAMC,aAAa,GAAG,CAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAUX;EAAA,IATJC,EASI,QATJA,EASI;EAAA,IARJC,OAQI,QARJA,OAQI;EAAA,IAPJC,IAOI,QAPJA,IAOI;EAAA,IANJC,MAMI,QANJA,MAMI;EAAA,IALJC,MAKI,QALJA,MAKI;EAAA,4BAJJC,WAII;EAAA,IAJJA,WAII,iCAJU,UAIV;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,KAGJ;EAAA,2BAFJC,UAEI;EAAA,IAFJA,UAEI,gCAFS,KAET;EAAA,IADDC,MACC;;EACJ;EAEA,IAAMC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Barchart.js","names":["React","useMemo","useEffect","useState","useCallback","useRef","PropTypes","withStyles","Chart","applyLayoutDefaults","applyDataDefaults","styles","MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","MIN_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","el","getBoundingClientRect","boundingRect","width","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","name"],"sources":["../../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\nconst MIN_WIDTH = 75;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width: boundingRect } = ref.current.el.getBoundingClientRect();\n const width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,SAAzB,EAAoCC,QAApC,EAA8CC,WAA9C,EAA2DC,MAA3D,QAAyE,OAAzE;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,mBAAT,EAA8BC,iBAA9B,QAAuD,2BAAvD;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,IAAMC,MAAM,GAAG,EAAf;AACA,IAAMC,aAAa,GAAG,EAAtB;AACA,IAAMC,aAAa,GAAG,CAAtB;AACA,IAAMC,SAAS,GAAG,EAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAUX;EAAA,IATJC,EASI,QATJA,EASI;EAAA,IARJC,OAQI,QARJA,OAQI;EAAA,IAPJC,IAOI,QAPJA,IAOI;EAAA,IANJC,MAMI,QANJA,MAMI;EAAA,IALJC,MAKI,QALJA,MAKI;EAAA,4BAJJC,WAII;EAAA,IAJJA,WAII,iCAJU,UAIV;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,KAGJ;EAAA,2BAFJC,UAEI;EAAA,IAFJA,UAEI,gCAFS,KAET;EAAA,IADDC,MACC;;EACJ;EAEA,IAAMC,gBAAgB,GAAGzB,OAAO,CAAC;IAAA,OAAMS,iBAAiB,CAACS,IAAD,EAAOK,UAAP,CAAvB;EAAA,CAAD,EAA4C,CAACL,IAAD,EAAOK,UAAP,CAA5C,CAAhC;EACA,IAAMG,WAAW,GAAG1B,OAAO,CACzB;IAAA,OAAMQ,mBAAmB,CAACW,MAAD,EAASG,KAAT,EAAgBC,UAAhB,CAAzB;EAAA,CADyB,EAEzB,CAACJ,MAAD,EAASG,KAAT,EAAgBC,UAAhB,CAFyB,CAA3B;EAKA;;EAEA,gBAAkCrB,QAAQ,CAACuB,gBAAD,CAA1C;EAAA;EAAA,IAAOE,SAAP;EAAA,IAAkBC,YAAlB;EAEA;;;EAEA,IAAMC,WAAW,GAAGzB,MAAM,CAAC,IAAD,CAA1B;EACAH,SAAS,CAAC,YAAM;IACd;IACA;IACA;IACA,IAAI,CAAC4B,WAAW,CAACC,OAAjB,EAA0B;MACxBF,YAAY,CAACH,gBAAD,CAAZ;IACD;;IAEDI,WAAW,CAACC,OAAZ,GAAsB,KAAtB;EACD,CATQ,EASN,CAACL,gBAAD,CATM,CAAT;EAWA;AACF;AACA;AACA;AACA;;EACE,IAAMM,mBAAmB,GAAG5B,WAAW,CAAC,UAAC6B,GAAD,EAAS;IAC/C;IACA;IACA,IAAMC,QAAQ,GAAGD,GAAG,CAACF,OAAJ,CAAYI,KAAZ,CAAkBhB,IAAnC;IACA,IAAMiB,UAAU,GAAGH,GAAG,CAACF,OAAJ,CAAYI,KAAZ,CAAkBf,MAArC;;IAEA,IAAIc,QAAQ,CAACG,MAAT,GAAkB,CAAtB,EAAyB;MACvB,IAAQC,OAAR,GAAyCF,UAAzC,CAAQE,OAAR;MAAA,IAAiBC,MAAjB,GAAyCH,UAAzC,CAAiBG,MAAjB;MAAA,IAAyBC,WAAzB,GAAyCJ,UAAzC,CAAyBI,WAAzB;MAEA,IAAMC,OAAO,GAAGH,OAAO,KAAK,OAA5B;MACA,IAAMI,mBAAmB,GAAGD,OAAO,GAAG,CAAH,GAAOP,QAAQ,CAACG,MAAnD;MACA,IAAMM,aAAa,GAAGT,QAAQ,CAAC,CAAD,CAAR,CAAYU,CAAZ,CAAcP,MAApC;;MAEA,4BAAgCJ,GAAG,CAACF,OAAJ,CAAYc,EAAZ,CAAeC,qBAAf,EAAhC;MAAA,IAAeC,YAAf,yBAAQC,KAAR;;MACA,IAAMA,KAAK,GAAGD,YAAY,GAAGhC,SAAf,GAA2BA,SAA3B,GAAuCgC,YAArD;MACA,IAAME,SAAS,GAAGD,KAAK,GAAGpC,MAA1B;MACA,IAAMsC,UAAU,GAAGD,SAAS,GAAGN,aAA/B;MACA,IAAMQ,QAAQ,GAAGD,UAAU,IAAI,IAAIX,MAAR,CAAV,GAA4BW,UAAU,IAAI,IAAIX,MAAR,CAAV,GAA4BC,WAAzE;MAEA,IAAMY,kBAAkB,GAAGD,QAAQ,GAAGT,mBAAtC;MACA,IAAMW,aAAa,GAAGD,kBAAkB,GAAGvC,aAA3C;MACA,IAAMyC,SAAS,GAAGF,kBAAkB,GAAGtC,aAAvC;MACA,IAAMyC,sBAAsB,GAAGrB,QAAQ,CAAC,CAAD,CAAR,CAAYc,KAAZ,KAAsBQ,SAArD;;MAEA,IAAIH,aAAa,IAAI,CAACE,sBAAtB,EAA8C;QAC5C,IAAME,QAAQ,GAAI5C,aAAa,GAAGoC,SAAjB,GAA8BN,aAA/C;QAEA,IAAMe,OAAO,GAAGxB,QAAQ,CAACyB,GAAT,CAAa,UAACC,OAAD,EAAa;UACxC,uCAAYA,OAAZ;YAAqBZ,KAAK,EAAES;UAA5B;QACD,CAFe,CAAhB;QAIA5B,YAAY,CAAC6B,OAAD,CAAZ;MACD;;MAED,IAAIJ,SAAS,IAAI,CAACC,sBAAlB,EAA0C;QACxC,IAAME,SAAQ,GAAI3C,aAAa,GAAGmC,SAAjB,GAA8BN,aAA/C;;QAEA,IAAMe,QAAO,GAAGxB,QAAQ,CAACyB,GAAT,CAAa,UAACC,OAAD,EAAa;UACxC,uCAAYA,OAAZ;YAAqBZ,KAAK,EAAES;UAA5B;QACD,CAFe,CAAhB;;QAIA5B,YAAY,CAAC6B,QAAD,CAAZ;MACD;;MAED,IAAI,CAACL,aAAD,IAAkBE,sBAAtB,EAA8C;QAC5C,IAAMG,SAAO,GAAGxB,QAAQ,CAACyB,GAAT,CAAa,UAACC,OAAD,EAAa;UACxC,uCAAYA,OAAZ;YAAqBZ,KAAK,EAAEQ;UAA5B;QACD,CAFe,CAAhB;;QAIA3B,YAAY,CAAC6B,SAAD,CAAZ;MACD;IACF;EACF,CApDsC,EAoDpC,EApDoC,CAAvC;EAsDA,oBACE,oBAAC,KAAD;IACE,EAAE,EAAEzC,EADN;IAEE,OAAO,EAAEC,OAFX;IAGE,IAAI,EAAEU,SAHR;IAIE,MAAM,EAAED,WAJV;IAKE,MAAM,EAAEN,MALV;IAME,WAAW,EAAEC,WANf;IAOE,SAAS,EAAEU;EAPb,GAQMP,MARN,EADF;AAYD,CA5GD;;AA6GA,wCAAAT,QAAQ,CAAC6C,SAAT,GAAqB;EACnB;AACF;AACA;EACE5C,EAAE,EAAEX,SAAS,CAACwD,MAJK;;EAKnB;AACF;AACA;EACE5C,OAAO,EAAEZ,SAAS,CAACyD,UAAV,CAAqBC,MAArB,CARU;;EASnB;AACF;AACA;EACE7C,IAAI,EAAEb,SAAS,CAAC2D,OAAV,CAAkB3D,SAAS,CAACyD,UAAV,CAAqBC,MAArB,CAAlB,EAAgDE,UAZnC;;EAanB;AACF;AACA;EACE9C,MAAM,EAAEd,SAAS,CAACyD,UAAV,CAAqBC,MAArB,CAhBW;;EAiBnB;AACF;AACA;EACE3C,MAAM,EAAEf,SAAS,CAACyD,UAAV,CAAqBC,MAArB,CApBW;;EAqBnB;AACF;AACA;EACE1C,WAAW,EAAEhB,SAAS,CAAC6D,KAAV,CAAgB,CAAC,QAAD,EAAW,UAAX,CAAhB,CAxBM;;EAyBnB;AACF;AACA;EACE5C,KAAK,EAAEjB,SAAS,CAAC8D,IA5BE;;EA6BnB;AACF;AACA;EACE5C,UAAU,EAAElB,SAAS,CAAC8D;AAhCH,CAArB;AAmCA,eAAe7D,UAAU,CAACI,MAAD,EAAS;EAAE0D,IAAI,EAAE;AAAR,CAAT,CAAV,CAA2CrD,QAA3C,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width:
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"sources":["../../../src/AppSwitcher/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n theme.hv.spacing.sm - 4\n }px`,\n\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n },\n\n single: {\n width: 320,\n },\n dual: {\n width: 640,\n },\n fluid: {},\n\n closed: {\n display: \"none\",\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.hv.shadows[1],\n },\n\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n },\n\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // we need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n\n marginTop: \"auto\",\n\n height: 52,\n\n // we need to play with the 4px because of the focus ring\n padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n\n ...theme.hv.typography.highlightText,\n },\n\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTypography: {},\n itemIcon: {},\n itemTitle: {},\n itemInfo: {},\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJC,OAAO,EAAE,MADL;IAEJC,aAAa,EAAE,QAFX;IAIJC,QAAQ,EAAE,QAJN;IAMJ;IACAC,OAAO,EAAG,GAAEL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,QAAOR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,MACjER,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CACvB,IATG;IAWJC,eAAe,EAAET,KAAK,CAACM,EAAN,CAASI,OAAT,CAAiBC,UAAjB,CAA4BC;EAXzC,CADmB;EAezBC,MAAM,EAAE;IACNC,KAAK,EAAE;EADD,CAfiB;EAkBzBC,IAAI,EAAE;IACJD,KAAK,EAAE;EADH,CAlBmB;EAqBzBE,KAAK,EAAE,EArBkB;EAuBzBC,MAAM,EAAE;IACNf,OAAO,EAAE;EADH,CAvBiB;EA0BzBgB,IAAI,EAAE;IACJC,MAAM,EAAE,MADJ;IAEJC,QAAQ,EAAE,UAFN;IAGJC,GAAG,EAAE,MAHD;IAIJC,SAAS,EAAE,QAJP;IAKJC,SAAS,EAAEvB,KAAK,CAACM,EAAN,CAASkB,OAAT,CAAiB,CAAjB;EALP,CA1BmB;EAkCzBC,KAAK,EAAE;IACLC,SAAS,EAAE,EADN;IAGL;IACArB,OAAO,EAAG,OAAML,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAG,MAAKR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,QAJ5D;IAMLJ,QAAQ,EAAE,QANL;IAOLuB,UAAU,EAAE,QAPP;IAQLC,YAAY,EAAE;EART,CAlCkB;EA6CzBC,gBAAgB,EAAE;IAChB3B,OAAO,EAAE,MADO;IAEhB4B,QAAQ,EAAE,MAFM;IAGhBC,cAAc,EAAE,YAHA;IAKhBC,SAAS,EAAE,MALK;IAOhB;IACA3B,OAAO,EAAE;EARO,CA7CO;EAwDzB4B,eAAe;IACb/B,OAAO,EAAE,MADI;IAEbgC,UAAU,EAAE,QAFC;IAIbC,SAAS,EAAE,MAJE;IAMbC,MAAM,EAAE,EANK;IAQb;IACA/B,OAAO,EAAG,GAAEL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,MAAKR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE;EATpD,GAWVR,KAAK,CAACM,EAAN,CAAS+B,UAAT,CAAoBC,aAXV,CAxDU;EAsEzBC,IAAI,EAAE,EAtEmB;EAuEzBC,YAAY,EAAE,EAvEW;EAwEzBC,YAAY,EAAE,EAxEW;EAyEzBC,cAAc,EAAE,EAzES;EA0EzBC,QAAQ,EAAE,EA1Ee;EA2EzBC,SAAS,EAAE,EA3Ec;EA4EzBC,QAAQ,EAAE;AA5Ee,CAAZ,CAAf;;AA+EA,eAAe9C,MAAf"}
|
|
@@ -17,6 +17,7 @@ import styles from "./styles";
|
|
|
17
17
|
const MARGIN = 50;
|
|
18
18
|
const MAX_BAR_WIDTH = 90;
|
|
19
19
|
const MIN_BAR_WIDTH = 3;
|
|
20
|
+
const MIN_WIDTH = 75;
|
|
20
21
|
/**
|
|
21
22
|
* A Bar chart is a chart or graph that presents categorical data with rectangular bars.
|
|
22
23
|
*
|
|
@@ -78,8 +79,9 @@ const Barchart = _ref => {
|
|
|
78
79
|
const numberOfBarsByGroup = isStack ? 1 : plotData.length;
|
|
79
80
|
const numberOfGroup = plotData[0].x.length;
|
|
80
81
|
const {
|
|
81
|
-
width
|
|
82
|
+
width: boundingRect
|
|
82
83
|
} = ref.current.el.getBoundingClientRect();
|
|
84
|
+
const width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;
|
|
83
85
|
const plotWidth = width - MARGIN;
|
|
84
86
|
const groupWidth = plotWidth / numberOfGroup;
|
|
85
87
|
const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Barchart.js","names":["React","useMemo","useEffect","useState","useCallback","useRef","PropTypes","withStyles","Chart","applyLayoutDefaults","applyDataDefaults","styles","MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","width","el","getBoundingClientRect","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","name"],"sources":["../../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width } = ref.current.el.getBoundingClientRect();\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,SAAzB,EAAoCC,QAApC,EAA8CC,WAA9C,EAA2DC,MAA3D,QAAyE,OAAzE;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,mBAAT,EAA8BC,iBAA9B,QAAuD,2BAAvD;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,MAAMC,MAAM,GAAG,EAAf;AACA,MAAMC,aAAa,GAAG,EAAtB;AACA,MAAMC,aAAa,GAAG,CAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,QAUX;EAAA,IAVY;IAChBC,EADgB;IAEhBC,OAFgB;IAGhBC,IAHgB;IAIhBC,MAJgB;IAKhBC,MALgB;IAMhBC,WAAW,GAAG,UANE;IAOhBC,KAAK,GAAG,KAPQ;IAQhBC,UAAU,GAAG;EARG,CAUZ;EAAA,IADDC,MACC;;EACJ;EAEA,MAAMC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Barchart.js","names":["React","useMemo","useEffect","useState","useCallback","useRef","PropTypes","withStyles","Chart","applyLayoutDefaults","applyDataDefaults","styles","MARGIN","MAX_BAR_WIDTH","MIN_BAR_WIDTH","MIN_WIDTH","Barchart","id","classes","data","layout","config","tooltipType","stack","horizontal","others","dataWithDefaults","chartLayout","chartData","setChartData","firstRender","current","recalculateBarWidth","ref","plotData","props","plotLayout","length","barmode","bargap","bargroupgap","isStack","numberOfBarsByGroup","numberOfGroup","x","width","boundingRect","el","getBoundingClientRect","plotWidth","groupWidth","colWidth","calculatedBarWidth","greaterThan90","lessThan3","isAlreadyGreaterThan90","undefined","newWidth","newData","map","subData","propTypes","string","instanceOf","Object","arrayOf","isRequired","oneOf","bool","name"],"sources":["../../../src/Barchart/Barchart.js"],"sourcesContent":["import React, { useMemo, useEffect, useState, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Chart from \"../Chart\";\nimport { applyLayoutDefaults, applyDataDefaults } from \"./barchartPlotlyOverrides\";\nimport styles from \"./styles\";\n\nconst MARGIN = 50;\nconst MAX_BAR_WIDTH = 90;\nconst MIN_BAR_WIDTH = 3;\nconst MIN_WIDTH = 75;\n\n/**\n * A Bar chart is a chart or graph that presents categorical data with rectangular bars.\n *\n * Our implementation leverages the Plotly charting library. If you have a specific case\n * that we don't cover, the Plotly [documentation](https://plotly.com/javascript/) is a good starting point.\n */\nconst Barchart = ({\n id,\n classes,\n data,\n layout,\n config,\n tooltipType = \"multiple\",\n stack = false,\n horizontal = false,\n ...others\n}) => {\n /* Values derived from props */\n\n const dataWithDefaults = useMemo(() => applyDataDefaults(data, horizontal), [data, horizontal]);\n const chartLayout = useMemo(\n () => applyLayoutDefaults(layout, stack, horizontal),\n [layout, stack, horizontal]\n );\n\n /* State */\n\n const [chartData, setChartData] = useState(dataWithDefaults);\n\n /* Effects */\n\n const firstRender = useRef(true);\n useEffect(() => {\n // only setChartData when prop value changes\n // not needed on first render because the\n // initial state is already properly set\n if (!firstRender.current) {\n setChartData(dataWithDefaults);\n }\n\n firstRender.current = false;\n }, [dataWithDefaults]);\n\n /**\n * Used to force the max width of each bar with 90px.\n *\n * (this is effectively more an effect than a callback)\n */\n const recalculateBarWidth = useCallback((ref) => {\n // use the data and layout info directly from the plotly ref\n // as it's always the most uptodate version.\n const plotData = ref.current.props.data;\n const plotLayout = ref.current.props.layout;\n\n if (plotData.length > 0) {\n const { barmode, bargap, bargroupgap } = plotLayout;\n\n const isStack = barmode === \"stack\";\n const numberOfBarsByGroup = isStack ? 1 : plotData.length;\n const numberOfGroup = plotData[0].x.length;\n\n const { width: boundingRect } = ref.current.el.getBoundingClientRect();\n const width = boundingRect < MIN_WIDTH ? MIN_WIDTH : boundingRect;\n const plotWidth = width - MARGIN;\n const groupWidth = plotWidth / numberOfGroup;\n const colWidth = groupWidth * (1 - bargap) - groupWidth * (1 - bargap) * bargroupgap;\n\n const calculatedBarWidth = colWidth / numberOfBarsByGroup;\n const greaterThan90 = calculatedBarWidth > MAX_BAR_WIDTH;\n const lessThan3 = calculatedBarWidth < MIN_BAR_WIDTH;\n const isAlreadyGreaterThan90 = plotData[0].width !== undefined;\n\n if (greaterThan90 && !isAlreadyGreaterThan90) {\n const newWidth = (MAX_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (lessThan3 && !isAlreadyGreaterThan90) {\n const newWidth = (MIN_BAR_WIDTH / plotWidth) * numberOfGroup;\n\n const newData = plotData.map((subData) => {\n return { ...subData, width: newWidth };\n });\n\n setChartData(newData);\n }\n\n if (!greaterThan90 && isAlreadyGreaterThan90) {\n const newData = plotData.map((subData) => {\n return { ...subData, width: undefined };\n });\n\n setChartData(newData);\n }\n }\n }, []);\n\n return (\n <Chart\n id={id}\n classes={classes}\n data={chartData}\n layout={chartLayout}\n config={config}\n tooltipType={tooltipType}\n afterPlot={recalculateBarWidth}\n {...others}\n />\n );\n};\nBarchart.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.instanceOf(Object),\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),\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 * Sets is the chart is stack.\n */\n stack: PropTypes.bool,\n /**\n * Sets is the chart is horizontal.\n */\n horizontal: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvBarchart\" })(Barchart);\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "3.67.
|
|
3
|
+
"version": "3.67.5",
|
|
4
4
|
"description": "A collection of React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"publishConfig": {
|
|
106
106
|
"access": "public"
|
|
107
107
|
},
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "a62afdd2d80c42fb6a60aeebf16f8b38c496fc94"
|
|
109
109
|
}
|