@elliemae/ds-dataviz 3.37.0-rc.4 → 3.37.0
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/SingleStackedBar/SingleStackedBar.js +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +1 -1
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js +1 -1
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +1 -1
- package/dist/esm/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +1 -1
- package/dist/types/graphs/Chart/SingleStackedBar/react-desc-prop-types.d.ts +1 -1
- package/package.json +6 -7
|
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
41
|
-
var
|
|
41
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
42
42
|
var import__ = require("../../../index.js");
|
|
43
43
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
44
44
|
var import_styles = require("./styles.js");
|
|
@@ -74,7 +74,7 @@ const Bar = import_react.default.memo((props) => {
|
|
|
74
74
|
bg,
|
|
75
75
|
height,
|
|
76
76
|
borderRadius,
|
|
77
|
-
innerRef: (0,
|
|
77
|
+
innerRef: (0, import_ds_system.mergeRefs)(handleRefCallback, setReferenceElement),
|
|
78
78
|
tabIndex,
|
|
79
79
|
role: "img",
|
|
80
80
|
"aria-label": `${datum.name} value: ${datum.data}`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCf;AAvCR,mBAA8E;AAE9E,qBAAqB;AACrB,8BAMO;AACP,yBAA2B;AAC3B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from '../../../index.js';\nimport { type DSSingleStackedBarT, defaultProps, DSSingleStackedBarPropTypes } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n return (\n <div>\n {(isFocused || isHover) && TooltipRenderer ? (\n <DSPopperJS referenceElement={referenceElement} showPopover>\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n </DSPopperJS>\n ) : null}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={bg}\n height={height}\n borderRadius={borderRadius}\n innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n tabIndex={tabIndex}\n role=\"img\"\n // until uziel work is merged we keep this default value\n aria-label={`${datum.name} value: ${datum.data}`}\n />\n </div>\n );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n const [isChartFocused, setIsChartFocused] = useState(false);\n\n const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n const rows = useMemo(\n () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n [LegendRenderer, height],\n );\n const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n const getBorderRadius = useCallback(\n (index: number) => {\n if (index === 0) return '50px 0 0 50px';\n if (index === data.length - 1) return '0 50px 50px 0';\n return undefined;\n },\n [data.length],\n );\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowRight') {\n if (barNames[keyBarFocused + 1]) {\n setKeyBarFocused(keyBarFocused + 1);\n } else {\n setKeyBarFocused(0);\n }\n }\n if (e.code === 'ArrowLeft') {\n if (barNames[keyBarFocused - 1]) {\n setKeyBarFocused(keyBarFocused - 1);\n } else {\n setKeyBarFocused(barNames.length - 1);\n }\n }\n },\n [keyBarFocused, barNames],\n );\n\n return (\n <Wrapper\n cols={cols}\n gutter={gutter}\n role=\"region\"\n onKeyDown={handleOnKeyDown}\n tabIndex={-1}\n onFocus={() => setIsChartFocused(true)}\n onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n {...xstyledProps}\n {...globalAttributes}\n >\n {data.map((datum, i) => (\n <Grid rows={rows}>\n <Bar\n key={datum.name}\n datum={datum}\n isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n borderRadius={getBorderRadius(i)}\n bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n tabIndex={i === keyBarFocused ? 0 : -1}\n {...props}\n />\n {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n </Grid>\n ))}\n </Wrapper>\n );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBarWithSchema, DSSingleStackedBar };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { type BackgroundProps, type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n export type DatumT = {\n name: string;\n data: number;\n color: string;\n };\n export type SingleStackedBarDatumT = DatumT[];\n export type TooltipRenderDataT = {\n datum: DatumT;\n };\n export interface SingleStackedBarT {\n data: SingleStackedBarDatumT;\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n height: string | number;\n gutter?: string | number;\n }\n\n export interface BarT extends SingleStackedBarT {\n isFocused: boolean;\n borderRadius?: BorderProps['borderRadius'];\n bg: BackgroundProps['bg'];\n tabIndex?: 0 | -1;\n datum: DatumT;\n }\n\n export interface RequiredProps {\n height: string | number;\n data: DatumT[];\n }\n\n export interface DefaultProps {\n gutter: string;\n }\n\n export interface OptionalProps {\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n height: PropTypes.string.description('Height of the bar').isRequired,\n gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n data: PropTypes.arrayOf(\n PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n ).description('Array of the series which represent the chart'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AA2DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,kCAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM,EAAE,MAAM,kCAAU,QAAQ,MAAM,kCAAU,QAAQ,OAAO,kCAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
describe
|
|
11
11
|
} from "@elliemae/ds-props-helpers";
|
|
12
12
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
13
|
-
import { mergeRefs } from "@elliemae/ds-
|
|
13
|
+
import { mergeRefs } from "@elliemae/ds-system";
|
|
14
14
|
import { COLOR_PALLET } from "../../../index.js";
|
|
15
15
|
import { defaultProps, DSSingleStackedBarPropTypes } from "./react-desc-prop-types.js";
|
|
16
16
|
import { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from "./styles.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from '../../../index.js';\nimport { type DSSingleStackedBarT, defaultProps, DSSingleStackedBarPropTypes } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n return (\n <div>\n {(isFocused || isHover) && TooltipRenderer ? (\n <DSPopperJS referenceElement={referenceElement} showPopover>\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n </DSPopperJS>\n ) : null}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={bg}\n height={height}\n borderRadius={borderRadius}\n innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n tabIndex={tabIndex}\n role=\"img\"\n // until uziel work is merged we keep this default value\n aria-label={`${datum.name} value: ${datum.data}`}\n />\n </div>\n );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n const [isChartFocused, setIsChartFocused] = useState(false);\n\n const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n const rows = useMemo(\n () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n [LegendRenderer, height],\n );\n const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n const getBorderRadius = useCallback(\n (index: number) => {\n if (index === 0) return '50px 0 0 50px';\n if (index === data.length - 1) return '0 50px 50px 0';\n return undefined;\n },\n [data.length],\n );\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowRight') {\n if (barNames[keyBarFocused + 1]) {\n setKeyBarFocused(keyBarFocused + 1);\n } else {\n setKeyBarFocused(0);\n }\n }\n if (e.code === 'ArrowLeft') {\n if (barNames[keyBarFocused - 1]) {\n setKeyBarFocused(keyBarFocused - 1);\n } else {\n setKeyBarFocused(barNames.length - 1);\n }\n }\n },\n [keyBarFocused, barNames],\n );\n\n return (\n <Wrapper\n cols={cols}\n gutter={gutter}\n role=\"region\"\n onKeyDown={handleOnKeyDown}\n tabIndex={-1}\n onFocus={() => setIsChartFocused(true)}\n onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n {...xstyledProps}\n {...globalAttributes}\n >\n {data.map((datum, i) => (\n <Grid rows={rows}>\n <Bar\n key={datum.name}\n datum={datum}\n isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n borderRadius={getBorderRadius(i)}\n bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n tabIndex={i === keyBarFocused ? 0 : -1}\n {...props}\n />\n {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n </Grid>\n ))}\n </Wrapper>\n );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBarWithSchema, DSSingleStackedBar };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { type BackgroundProps, type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n export type DatumT = {\n name: string;\n data: number;\n color: string;\n };\n export type SingleStackedBarDatumT = DatumT[];\n export type TooltipRenderDataT = {\n datum: DatumT;\n };\n export interface SingleStackedBarT {\n data: SingleStackedBarDatumT;\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n height: string | number;\n gutter?: string | number;\n }\n\n export interface BarT extends SingleStackedBarT {\n isFocused: boolean;\n borderRadius?: BorderProps['borderRadius'];\n bg: BackgroundProps['bg'];\n tabIndex?: 0 | -1;\n datum: DatumT;\n }\n\n export interface RequiredProps {\n height: string | number;\n data: DatumT[];\n }\n\n export interface DefaultProps {\n gutter: string;\n }\n\n export interface OptionalProps {\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n height: PropTypes.string.description('Height of the bar').isRequired,\n gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n data: PropTypes.arrayOf(\n PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n ).description('Array of the series which represent the chart'),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,UAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,UAAU;AAAA,IACd,UAAU,MAAM,EAAE,MAAM,UAAU,QAAQ,MAAM,UAAU,QAAQ,OAAO,UAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-
|
|
2
|
+
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
|
|
3
3
|
import { type BackgroundProps, type BorderProps } from '@elliemae/ds-system';
|
|
4
4
|
export declare namespace DSSingleStackedBarT {
|
|
5
5
|
type DatumT = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.37.0
|
|
3
|
+
"version": "3.37.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -42,18 +42,17 @@
|
|
|
42
42
|
"d3-time": "~3.1.0",
|
|
43
43
|
"resize-observer-polyfill": "~1.5.1",
|
|
44
44
|
"uid": "~2.0.2",
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-system": "3.37.0-rc.4"
|
|
45
|
+
"@elliemae/ds-popperjs": "3.37.0",
|
|
46
|
+
"@elliemae/ds-system": "3.37.0",
|
|
47
|
+
"@elliemae/ds-grid": "3.37.0",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.37.0"
|
|
50
49
|
},
|
|
51
50
|
"devDependencies": {
|
|
52
51
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
53
52
|
"@elliemae/pui-theme": "~2.9.3",
|
|
54
53
|
"@types/d3": "~7.4.0",
|
|
55
54
|
"styled-components": "~5.3.9",
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.37.0
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.37.0"
|
|
57
56
|
},
|
|
58
57
|
"peerDependencies": {
|
|
59
58
|
"@elliemae/pui-theme": "~2.9.3",
|