@elliemae/ds-dataviz 3.14.0-rc.0 → 3.14.0-rc.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/cjs/graphs/Chart/parts/Legend/LegendItem.js +4 -2
- package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js +4 -2
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/esm/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/types/graphs/Chart/react-desc-prop-types.d.ts +8 -0
- package/package.json +4 -4
|
@@ -47,11 +47,13 @@ const LegendItem = ({ domainValue }) => {
|
|
|
47
47
|
setHiddenSeries,
|
|
48
48
|
hiddenSeries,
|
|
49
49
|
originalSeries: series,
|
|
50
|
-
props: { types }
|
|
50
|
+
props: { types, legend }
|
|
51
51
|
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
52
52
|
const serieData = series.find((serie) => serie.name === domainValue);
|
|
53
53
|
const LegendIcon = LegendItemsMap[serieData?.pointStyle] ?? (serieData?.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
|
|
54
54
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
55
|
+
if (legend?.preventFilterAction)
|
|
56
|
+
return;
|
|
55
57
|
setHiddenSeries((prev) => {
|
|
56
58
|
if (prev.includes(domainValue))
|
|
57
59
|
return prev.filter((serie) => serie !== domainValue);
|
|
@@ -59,7 +61,7 @@ const LegendItem = ({ domainValue }) => {
|
|
|
59
61
|
return [...prev, domainValue];
|
|
60
62
|
return prev;
|
|
61
63
|
});
|
|
62
|
-
}, [domainValue, series.length, setHiddenSeries]);
|
|
64
|
+
}, [domainValue, legend?.preventFilterAction, series.length, setHiddenSeries]);
|
|
63
65
|
return (0, import_react.useMemo)(
|
|
64
66
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
65
67
|
"g",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n originalSeries: series,\n props: { types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData?.pointStyle] ??\n (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC,OAAE,WAAU,cACX,sDAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n originalSeries: series,\n props: { types, legend },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData?.pointStyle] ??\n (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n if (legend?.preventFilterAction) return;\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, legend?.preventFilterAction, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC,OAAE,WAAU,cACX,sDAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO,EAAE,OAAO,OAAO;AAAA,EACzB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,WAAW,gBACzB,WAAW,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAE1E,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,QAAQ;AAAqB;AACjC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,QAAQ,qBAAqB,OAAO,QAAQ,eAAe,CAAC;AAE7E,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,sDAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC3C,4CAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAPK;AAAA,IAQP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,YAAY;AAAA,EACnE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n export type LinearScale = ScaleLinear<number, number, never>;\n export type BandScale = ScaleBand<string>;\n\n export type Scales = LinearScale | BandScale;\n export interface SeriesT {\n name: string;\n data: Array<number | null | { x: number; y: number }>;\n type: SerieTypeT;\n scale?: string;\n color?: string;\n // line\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export interface ScrapperT {\n type: 'horizontal' | 'vertical';\n color: string;\n tooltipPreference: string;\n }\n\n export interface SerieComponentT {\n serie: InternalSerie;\n }\n\n export interface AxisTickT {\n tickValues: number[] | Date[];\n tickFormat: (value: number) => string | string;\n tickCount: number;\n tickRotation: number;\n overwriteTicks: boolean;\n color: string;\n }\n\n export interface AxisT {\n showGrid: boolean;\n color: string;\n label: string;\n type: AxisTypeT;\n cols?: string[];\n domainPadding: number;\n hideAxis: boolean;\n beginAtZero?: boolean;\n advanced: {\n pointSpacing: {\n type: 'string';\n value: number;\n };\n };\n tick: AxisTickT;\n }\n\n export interface InternalDatum {\n key: string;\n value: number | { x: number; y: number };\n position: number;\n serie: string;\n }\n\n export interface InternalSerie {\n key: string;\n data: InternalDatum[];\n name: string;\n type: DSChartT.SerieTypeT;\n scale?: string | undefined;\n color?: string;\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export type InternalData = InternalSerie[];\n\n export interface OptionalProps {\n y2Axis?: AxisT;\n groups?: string[][];\n types?: 'scatter';\n scrapper: ScrapperT;\n withTrendHighlight: boolean;\n TooltipRenderer: () => JSX.Element;\n height: number;\n width: number;\n }\n\n export interface DefaultProps {\n yAxis: AxisT;\n xAxis: AxisT;\n series: SeriesT[];\n }\n\n export interface RequiredProps {}\n\n export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n export type StackedSeriesByGroupT = Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n series: [\n {\n name: '1',\n data: [0],\n color: 'grey-100',\n type: 'bar',\n },\n ],\n xAxis: {\n cols: ['0'],\n },\n yAxis: {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n height: PropTypes.number.isRequired.description('height').defaultValue(''),\n width: PropTypes.number.isRequired.description('height').defaultValue(''),\n margin: PropTypes.shape({\n top: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number,\n right: PropTypes.number,\n })\n .isRequired.description('margin')\n .defaultValue(''),\n series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;
|
|
4
|
+
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n export type LinearScale = ScaleLinear<number, number, never>;\n export type BandScale = ScaleBand<string>;\n\n export type Scales = LinearScale | BandScale;\n export interface SeriesT {\n name: string;\n data: Array<number | null | { x: number; y: number }>;\n type: SerieTypeT;\n scale?: string;\n color?: string;\n // line\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export interface ScrapperT {\n type: 'horizontal' | 'vertical';\n color: string;\n tooltipPreference: string;\n }\n\n export interface SerieComponentT {\n serie: InternalSerie;\n }\n\n export interface LegendT {\n position: 'right' | 'bottom' | 'left' | 'top';\n preventFilterAction: boolean;\n }\n\n export interface AxisTickT {\n tickValues: number[] | Date[];\n tickFormat: (value: number) => string | string;\n tickCount: number;\n tickRotation: number;\n overwriteTicks: boolean;\n color: string;\n }\n\n export interface AxisT {\n showGrid: boolean;\n color: string;\n label: string;\n type: AxisTypeT;\n cols?: string[];\n domainPadding: number;\n hideAxis: boolean;\n beginAtZero?: boolean;\n advanced: {\n pointSpacing: {\n type: 'string';\n value: number;\n };\n };\n tick: AxisTickT;\n }\n\n export interface InternalDatum {\n key: string;\n value: number | { x: number; y: number };\n position: number;\n serie: string;\n }\n\n export interface InternalSerie {\n key: string;\n data: InternalDatum[];\n name: string;\n type: DSChartT.SerieTypeT;\n scale?: string | undefined;\n color?: string;\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export type InternalData = InternalSerie[];\n\n export interface OptionalProps {\n y2Axis?: AxisT;\n groups?: string[][];\n types?: 'scatter';\n scrapper: ScrapperT;\n withTrendHighlight: boolean;\n TooltipRenderer: () => JSX.Element;\n height: number;\n width: number;\n legend: LegendT;\n }\n\n export interface DefaultProps {\n yAxis: AxisT;\n xAxis: AxisT;\n series: SeriesT[];\n }\n\n export interface RequiredProps {}\n\n export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n export type StackedSeriesByGroupT = Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n series: [\n {\n name: '1',\n data: [0],\n color: 'grey-100',\n type: 'bar',\n },\n ],\n xAxis: {\n cols: ['0'],\n },\n yAxis: {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n height: PropTypes.number.isRequired.description('height').defaultValue(''),\n width: PropTypes.number.isRequired.description('height').defaultValue(''),\n margin: PropTypes.shape({\n top: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number,\n right: PropTypes.number,\n })\n .isRequired.description('margin')\n .defaultValue(''),\n series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAiH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,11 +18,13 @@ const LegendItem = ({ domainValue }) => {
|
|
|
18
18
|
setHiddenSeries,
|
|
19
19
|
hiddenSeries,
|
|
20
20
|
originalSeries: series,
|
|
21
|
-
props: { types }
|
|
21
|
+
props: { types, legend }
|
|
22
22
|
} = useContext(ChartContext);
|
|
23
23
|
const serieData = series.find((serie) => serie.name === domainValue);
|
|
24
24
|
const LegendIcon = LegendItemsMap[serieData?.pointStyle] ?? (serieData?.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
|
|
25
25
|
const handleOnClick = useCallback(() => {
|
|
26
|
+
if (legend?.preventFilterAction)
|
|
27
|
+
return;
|
|
26
28
|
setHiddenSeries((prev) => {
|
|
27
29
|
if (prev.includes(domainValue))
|
|
28
30
|
return prev.filter((serie) => serie !== domainValue);
|
|
@@ -30,7 +32,7 @@ const LegendItem = ({ domainValue }) => {
|
|
|
30
32
|
return [...prev, domainValue];
|
|
31
33
|
return prev;
|
|
32
34
|
});
|
|
33
|
-
}, [domainValue, series.length, setHiddenSeries]);
|
|
35
|
+
}, [domainValue, legend?.preventFilterAction, series.length, setHiddenSeries]);
|
|
34
36
|
return useMemo(
|
|
35
37
|
() => /* @__PURE__ */ jsxs(
|
|
36
38
|
"g",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n originalSeries: series,\n props: { types },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData?.pointStyle] ??\n (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIW,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n <g transform=\"rotate(45)\">\n <rect x={-6} y={-6} width={12} height={12} {...props} />\n </g>\n);\n\nconst LegendItemsMap = {\n [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n const {\n colorScale,\n setHiddenSeries,\n hiddenSeries,\n originalSeries: series,\n props: { types, legend },\n } = useContext(ChartContext);\n\n const serieData = series.find((serie) => serie.name === domainValue);\n const LegendIcon =\n LegendItemsMap[serieData?.pointStyle] ??\n (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n const handleOnClick = useCallback(() => {\n if (legend?.preventFilterAction) return;\n setHiddenSeries((prev) => {\n if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n if (prev.length + 1 !== series.length) return [...prev, domainValue];\n return prev;\n });\n }, [domainValue, legend?.preventFilterAction, series.length, setHiddenSeries]);\n\n return useMemo(\n () => (\n <g\n onClick={handleOnClick}\n key={domainValue}\n className=\"cell\"\n style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n >\n <LegendIcon fill={colorScale(domainValue)} />\n <text x={24} dy=\".32em\" fontWeight=\"600\">\n {domainValue}\n </text>\n </g>\n ),\n\n [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIW,cAwC5B,YAxC4B;AAJlC,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC,OAAE,WAAU,cACX,8BAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO,EAAE,OAAO,OAAO;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,WAAW,gBACzB,WAAW,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAE1E,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,QAAQ;AAAqB;AACjC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,QAAQ,qBAAqB,OAAO,QAAQ,eAAe,CAAC;AAE7E,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,8BAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC3C,oBAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAPK;AAAA,IAQP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,YAAY;AAAA,EACnE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n export type LinearScale = ScaleLinear<number, number, never>;\n export type BandScale = ScaleBand<string>;\n\n export type Scales = LinearScale | BandScale;\n export interface SeriesT {\n name: string;\n data: Array<number | null | { x: number; y: number }>;\n type: SerieTypeT;\n scale?: string;\n color?: string;\n // line\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export interface ScrapperT {\n type: 'horizontal' | 'vertical';\n color: string;\n tooltipPreference: string;\n }\n\n export interface SerieComponentT {\n serie: InternalSerie;\n }\n\n export interface AxisTickT {\n tickValues: number[] | Date[];\n tickFormat: (value: number) => string | string;\n tickCount: number;\n tickRotation: number;\n overwriteTicks: boolean;\n color: string;\n }\n\n export interface AxisT {\n showGrid: boolean;\n color: string;\n label: string;\n type: AxisTypeT;\n cols?: string[];\n domainPadding: number;\n hideAxis: boolean;\n beginAtZero?: boolean;\n advanced: {\n pointSpacing: {\n type: 'string';\n value: number;\n };\n };\n tick: AxisTickT;\n }\n\n export interface InternalDatum {\n key: string;\n value: number | { x: number; y: number };\n position: number;\n serie: string;\n }\n\n export interface InternalSerie {\n key: string;\n data: InternalDatum[];\n name: string;\n type: DSChartT.SerieTypeT;\n scale?: string | undefined;\n color?: string;\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export type InternalData = InternalSerie[];\n\n export interface OptionalProps {\n y2Axis?: AxisT;\n groups?: string[][];\n types?: 'scatter';\n scrapper: ScrapperT;\n withTrendHighlight: boolean;\n TooltipRenderer: () => JSX.Element;\n height: number;\n width: number;\n }\n\n export interface DefaultProps {\n yAxis: AxisT;\n xAxis: AxisT;\n series: SeriesT[];\n }\n\n export interface RequiredProps {}\n\n export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n export type StackedSeriesByGroupT = Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n series: [\n {\n name: '1',\n data: [0],\n color: 'grey-100',\n type: 'bar',\n },\n ],\n xAxis: {\n cols: ['0'],\n },\n yAxis: {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n height: PropTypes.number.isRequired.description('height').defaultValue(''),\n width: PropTypes.number.isRequired.description('height').defaultValue(''),\n margin: PropTypes.shape({\n top: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number,\n right: PropTypes.number,\n })\n .isRequired.description('margin')\n .defaultValue(''),\n series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n export type LinearScale = ScaleLinear<number, number, never>;\n export type BandScale = ScaleBand<string>;\n\n export type Scales = LinearScale | BandScale;\n export interface SeriesT {\n name: string;\n data: Array<number | null | { x: number; y: number }>;\n type: SerieTypeT;\n scale?: string;\n color?: string;\n // line\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export interface ScrapperT {\n type: 'horizontal' | 'vertical';\n color: string;\n tooltipPreference: string;\n }\n\n export interface SerieComponentT {\n serie: InternalSerie;\n }\n\n export interface LegendT {\n position: 'right' | 'bottom' | 'left' | 'top';\n preventFilterAction: boolean;\n }\n\n export interface AxisTickT {\n tickValues: number[] | Date[];\n tickFormat: (value: number) => string | string;\n tickCount: number;\n tickRotation: number;\n overwriteTicks: boolean;\n color: string;\n }\n\n export interface AxisT {\n showGrid: boolean;\n color: string;\n label: string;\n type: AxisTypeT;\n cols?: string[];\n domainPadding: number;\n hideAxis: boolean;\n beginAtZero?: boolean;\n advanced: {\n pointSpacing: {\n type: 'string';\n value: number;\n };\n };\n tick: AxisTickT;\n }\n\n export interface InternalDatum {\n key: string;\n value: number | { x: number; y: number };\n position: number;\n serie: string;\n }\n\n export interface InternalSerie {\n key: string;\n data: InternalDatum[];\n name: string;\n type: DSChartT.SerieTypeT;\n scale?: string | undefined;\n color?: string;\n dashStyle?: string;\n pointRadius?: number;\n }\n\n export type InternalData = InternalSerie[];\n\n export interface OptionalProps {\n y2Axis?: AxisT;\n groups?: string[][];\n types?: 'scatter';\n scrapper: ScrapperT;\n withTrendHighlight: boolean;\n TooltipRenderer: () => JSX.Element;\n height: number;\n width: number;\n legend: LegendT;\n }\n\n export interface DefaultProps {\n yAxis: AxisT;\n xAxis: AxisT;\n series: SeriesT[];\n }\n\n export interface RequiredProps {}\n\n export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n export type StackedSeriesByGroupT = Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n series: [\n {\n name: '1',\n data: [0],\n color: 'grey-100',\n type: 'bar',\n },\n ],\n xAxis: {\n cols: ['0'],\n },\n yAxis: {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n height: PropTypes.number.isRequired.description('height').defaultValue(''),\n width: PropTypes.number.isRequired.description('height').defaultValue(''),\n margin: PropTypes.shape({\n top: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number,\n right: PropTypes.number,\n })\n .isRequired.description('margin')\n .defaultValue(''),\n series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAiH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,10 @@ export declare namespace DSChartT {
|
|
|
25
25
|
interface SerieComponentT {
|
|
26
26
|
serie: InternalSerie;
|
|
27
27
|
}
|
|
28
|
+
interface LegendT {
|
|
29
|
+
position: 'right' | 'bottom' | 'left' | 'top';
|
|
30
|
+
preventFilterAction: boolean;
|
|
31
|
+
}
|
|
28
32
|
interface AxisTickT {
|
|
29
33
|
tickValues: number[] | Date[];
|
|
30
34
|
tickFormat: (value: number) => string | string;
|
|
@@ -79,6 +83,7 @@ export declare namespace DSChartT {
|
|
|
79
83
|
TooltipRenderer: () => JSX.Element;
|
|
80
84
|
height: number;
|
|
81
85
|
width: number;
|
|
86
|
+
legend: LegendT;
|
|
82
87
|
}
|
|
83
88
|
interface DefaultProps {
|
|
84
89
|
yAxis: AxisT;
|
|
@@ -173,6 +178,7 @@ export declare const propTypes: {
|
|
|
173
178
|
challenge: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
174
179
|
charSet: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
175
180
|
checked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
181
|
+
children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
176
182
|
cite: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
177
183
|
classID: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
178
184
|
className: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
@@ -372,6 +378,8 @@ export declare const propTypes: {
|
|
|
372
378
|
onRateChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
373
379
|
onReset: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
374
380
|
onResetCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
381
|
+
onResize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
382
|
+
onResizeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
375
383
|
onScroll: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
376
384
|
onScrollCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
|
377
385
|
onSeeked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.14.0-rc.
|
|
3
|
+
"version": "3.14.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"d3-shape": "~3.1.0",
|
|
41
41
|
"resize-observer-polyfill": "~1.5.1",
|
|
42
42
|
"uid": "~2.0.0",
|
|
43
|
-
"@elliemae/ds-popperjs": "3.14.0-rc.
|
|
44
|
-
"@elliemae/ds-system": "3.14.0-rc.
|
|
45
|
-
"@elliemae/ds-utilities": "3.14.0-rc.
|
|
43
|
+
"@elliemae/ds-popperjs": "3.14.0-rc.2",
|
|
44
|
+
"@elliemae/ds-system": "3.14.0-rc.2",
|
|
45
|
+
"@elliemae/ds-utilities": "3.14.0-rc.2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-theme": "~2.6.0",
|