@cloudscape-design/components 3.0.146 → 3.0.148
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/area-chart/elements/chart-popover.d.ts.map +1 -1
- package/area-chart/elements/chart-popover.js +3 -1
- package/area-chart/elements/chart-popover.js.map +1 -1
- package/area-chart/internal.d.ts.map +1 -1
- package/area-chart/internal.js +3 -1
- package/area-chart/internal.js.map +1 -1
- package/area-chart/model/index.d.ts +4 -2
- package/area-chart/model/index.d.ts.map +1 -1
- package/area-chart/model/index.js.map +1 -1
- package/area-chart/model/use-chart-model.d.ts +3 -1
- package/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +33 -7
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/internal/components/chart-popover/index.d.ts +6 -1
- package/internal/components/chart-popover/index.d.ts.map +1 -1
- package/internal/components/chart-popover/index.js +10 -6
- package/internal/components/chart-popover/index.js.map +1 -1
- package/internal/components/chart-popover/styles.css.js +3 -2
- package/internal/components/chart-popover/styles.scoped.css +8 -2
- package/internal/components/chart-popover/styles.selectors.js +3 -2
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/internal/metrics.d.ts +11 -0
- package/internal/metrics.d.ts.map +1 -1
- package/internal/metrics.js +41 -0
- package/internal/metrics.js.map +1 -1
- package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +4 -2
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/mixed-line-bar-chart/chart-popover.d.ts +4 -1
- package/mixed-line-bar-chart/chart-popover.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-popover.js +4 -3
- package/mixed-line-bar-chart/chart-popover.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts +3 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js +25 -8
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/pie-chart.d.ts.map +1 -1
- package/pie-chart/pie-chart.js +19 -5
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/segments.d.ts +1 -1
- package/pie-chart/segments.d.ts.map +1 -1
- package/pie-chart/segments.js +1 -1
- package/pie-chart/segments.js.map +1 -1
- package/wizard/index.d.ts.map +1 -1
- package/wizard/index.js +19 -10
- package/wizard/index.js.map +1 -1
- package/wizard/internal/analytics.d.ts +7 -0
- package/wizard/internal/analytics.d.ts.map +1 -0
- package/wizard/internal/analytics.js +67 -0
- package/wizard/internal/analytics.js.map +1 -0
- package/wizard/wizard-form.d.ts.map +1 -1
- package/wizard/wizard-form.js +2 -7
- package/wizard/wizard-form.js.map +1 -1
- package/internal/hooks/use-analytics/index.d.ts +0 -2
- package/internal/hooks/use-analytics/index.d.ts.map +0 -1
- package/internal/hooks/use-analytics/index.js +0 -16
- package/internal/hooks/use-analytics/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-popover.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC3E,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,IAAI,GACL,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,gBAAgB,EAAE,IAAI,GAAG,gBAAgB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,
|
|
1
|
+
{"version":3,"file":"chart-popover.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC3E,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,IAAI,GACL,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,gBAAgB,EAAE,IAAI,GAAG,gBAAgB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,sBA2BA"}
|
|
@@ -15,7 +15,9 @@ export default function AreaChartPopover(_a) {
|
|
|
15
15
|
trackRef: model.refs.verticalMarker,
|
|
16
16
|
trackKey: highlightDetails.highlightIndex,
|
|
17
17
|
dismissButton: highlightDetails.isPopoverPinned,
|
|
18
|
-
onDismiss: model.handlers.onPopoverDismiss
|
|
18
|
+
onDismiss: model.handlers.onPopoverDismiss,
|
|
19
|
+
onMouseLeave: model.handlers.onPopoverLeave,
|
|
20
|
+
ref: model.refs.popoverRef
|
|
19
21
|
};
|
|
20
22
|
return (React.createElement(ChartPopover, __assign({}, popoverProps, { container: model.refs.container.current, dismissAriaLabel: dismissAriaLabel, size: size }),
|
|
21
23
|
React.createElement(ChartSeriesDetails, { details: highlightDetails.seriesDetails }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAqC,EAU5E;QATC,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,IAAI,UAAA;IAOJ,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG;QACnB,KAAK,EAAE,gBAAgB,CAAC,UAAU;QAClC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,gBAAgB,CAAC,cAAc;QACzC,aAAa,EAAE,gBAAgB,CAAC,eAAe;QAC/C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAqC,EAU5E;QATC,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,IAAI,UAAA;IAOJ,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG;QACnB,KAAK,EAAE,gBAAgB,CAAC,UAAU;QAClC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,gBAAgB,CAAC,cAAc;QACzC,aAAa,EAAE,gBAAgB,CAAC,eAAe;QAC/C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,gBAAgB;QAC1C,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc;QAC3C,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;KAC3B,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,eACP,YAAY,IAChB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI;QAEV,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,aAAa,GAAI;QAC/D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,GAAI;QAC7C,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,GAAI,CACjD,CAChB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ChartPopover from '../../internal/components/chart-popover';\nimport ChartSeriesDetails from '../../internal/components/chart-series-details';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport styles from '../styles.css.js';\nimport { HighlightDetails } from './use-highlight-details';\n\nexport default function AreaChartPopover<T extends AreaChartProps.DataTypes>({\n model,\n highlightDetails,\n dismissAriaLabel,\n size,\n}: {\n model: ChartModel<T>;\n highlightDetails: null | HighlightDetails;\n dismissAriaLabel?: string;\n size?: 'small' | 'medium' | 'large';\n}) {\n if (!highlightDetails) {\n return null;\n }\n\n const popoverProps = {\n title: highlightDetails.formattedX,\n trackRef: model.refs.verticalMarker,\n trackKey: highlightDetails.highlightIndex,\n dismissButton: highlightDetails.isPopoverPinned,\n onDismiss: model.handlers.onPopoverDismiss,\n onMouseLeave: model.handlers.onPopoverLeave,\n ref: model.refs.popoverRef,\n };\n\n return (\n <ChartPopover\n {...popoverProps}\n container={model.refs.container.current}\n dismissAriaLabel={dismissAriaLabel}\n size={size}\n >\n <ChartSeriesDetails details={highlightDetails.seriesDetails} />\n <div className={styles['popover-divider']} />\n <ChartSeriesDetails details={highlightDetails.totalDetails} />\n </ChartPopover>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,IAAI,YAAY,CAC5E,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,aAAa,CAC5F,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,IAAI,YAAY,CAC5E,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,aAAa,CAC5F,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAwI3B"}
|
package/area-chart/internal.js
CHANGED
|
@@ -25,6 +25,7 @@ export default function InternalAreaChart(_a) {
|
|
|
25
25
|
var height = _a.height, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, xDomain = _a.xDomain, yDomain = _a.yDomain, controlledHighlightedSeries = _a.highlightedSeries, controlledVisibleSeries = _a.visibleSeries, externalSeries = _a.series, controlledOnVisibleChange = _a.onFilterChange, controlledOnHighlightChange = _a.onHighlightChange, i18nStrings = _a.i18nStrings, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescription = _a.ariaDescription, xTitle = _a.xTitle, yTitle = _a.yTitle, hideFilter = _a.hideFilter, additionalFilters = _a.additionalFilters, hideLegend = _a.hideLegend, legendTitle = _a.legendTitle, statusType = _a.statusType, detailPopoverSize = _a.detailPopoverSize, empty = _a.empty, noMatch = _a.noMatch, errorText = _a.errorText, loadingText = _a.loadingText, recoveryText = _a.recoveryText, onRecoveryClick = _a.onRecoveryClick, _d = _a.__internalRootRef, __internalRootRef = _d === void 0 ? null : _d, props = __rest(_a, ["height", "xScaleType", "yScaleType", "xDomain", "yDomain", "highlightedSeries", "visibleSeries", "series", "onFilterChange", "onHighlightChange", "i18nStrings", "ariaLabel", "ariaLabelledby", "ariaDescription", "xTitle", "yTitle", "hideFilter", "additionalFilters", "hideLegend", "legendTitle", "statusType", "detailPopoverSize", "empty", "noMatch", "errorText", "loadingText", "recoveryText", "onRecoveryClick", "__internalRootRef"]);
|
|
26
26
|
var baseProps = getBaseProps(props);
|
|
27
27
|
var containerRef = useRef(null);
|
|
28
|
+
var popoverRef = useRef(null);
|
|
28
29
|
if (isDevelopment) {
|
|
29
30
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
30
31
|
useEffect(function () {
|
|
@@ -48,7 +49,8 @@ export default function InternalAreaChart(_a) {
|
|
|
48
49
|
xScaleType: xScaleType,
|
|
49
50
|
yScaleType: yScaleType,
|
|
50
51
|
height: height,
|
|
51
|
-
width: width
|
|
52
|
+
width: width,
|
|
53
|
+
popoverRef: popoverRef
|
|
52
54
|
});
|
|
53
55
|
var _h = getChartStatus({
|
|
54
56
|
externalData: externalSeries,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { isDevelopment } from '../internal/is-development';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\n\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport ChartContainer from './chart-container';\nimport cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\nimport { warnOnce } from '../internal/logging';\nimport { nodeContains } from '../internal/utils/dom';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\ntype InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<\n AreaChartProps<T>,\n 'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalAreaChart<T extends AreaChartProps.DataTypes>({\n height,\n xScaleType,\n yScaleType,\n xDomain,\n yDomain,\n highlightedSeries: controlledHighlightedSeries,\n visibleSeries: controlledVisibleSeries,\n series: externalSeries,\n onFilterChange: controlledOnVisibleChange,\n onHighlightChange: controlledOnHighlightChange,\n i18nStrings,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n xTitle,\n yTitle,\n hideFilter,\n additionalFilters,\n hideLegend,\n legendTitle,\n statusType,\n detailPopoverSize,\n empty,\n noMatch,\n errorText,\n loadingText,\n recoveryText,\n onRecoveryClick,\n __internalRootRef = null,\n ...props\n}: InternalAreaChartProps<T>) {\n const baseProps = getBaseProps(props);\n const containerRef = useRef<HTMLDivElement>(null);\n\n if (isDevelopment) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (!isSeriesValid(externalSeries)) {\n warnOnce(\n 'AreaChart',\n \"The `series` property violates the component's constraints: all `area` \" +\n 'series must have `data` arrays of the same length and with the same x-values.'\n );\n }\n }, [externalSeries]);\n }\n\n const [width, setWidth] = useState(0);\n const [visibleSeries, setVisibleSeries] = useFilterProps(\n externalSeries,\n controlledVisibleSeries,\n controlledOnVisibleChange\n );\n const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n externalSeries,\n controlledHighlightedSeries,\n controlledOnHighlightChange\n );\n const model = useChartModel({\n externalSeries,\n visibleSeries,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n });\n\n const { isEmpty, isNoMatch, showChart } = getChartStatus({\n externalData: externalSeries,\n visibleData: visibleSeries,\n statusType,\n });\n const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch);\n const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n const reserveLegendSpace = !showChart && !hideLegend;\n const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n useEffect(() => {\n const onKeyDown = model.handlers.onDocumentKeyDown;\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [model.handlers.onDocumentKeyDown]);\n\n const onBlur = (event: React.FocusEvent) => {\n if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n model.handlers.onContainerBlur();\n }\n };\n\n const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef} onBlur={onBlur}>\n {showFilters && (\n <InternalBox className={cartesianStyles['filter-container']} margin={{ bottom: 'l' }}>\n <InternalSpaceBetween\n size=\"l\"\n direction=\"horizontal\"\n className={clsx({ [styles['has-default-filter']]: !hideFilter })}\n >\n {!hideFilter && (\n <AreaChartFilter\n model={model}\n filterLabel={i18nStrings.filterLabel}\n filterPlaceholder={i18nStrings.filterPlaceholder}\n filterSelectedAriaLabel={i18nStrings.filterSelectedAriaLabel}\n />\n )}\n {additionalFilters}\n </InternalSpaceBetween>\n </InternalBox>\n )}\n\n <div\n className={clsx(styles.content, {\n [styles['content--reserve-filter']]: reserveFilterSpace,\n [styles['content--reserve-legend']]: reserveLegendSpace,\n })}\n style={{ minHeight: height }}\n >\n <ChartStatusContainer\n isEmpty={isEmpty}\n isNoMatch={isNoMatch}\n showChart={showChart}\n statusType={statusType}\n empty={empty}\n noMatch={noMatch}\n loadingText={loadingText}\n errorText={errorText}\n recoveryText={recoveryText}\n onRecoveryClick={onRecoveryClick}\n />\n {showChart && (\n <ChartContainer\n model={model}\n autoWidth={setWidth}\n detailPopoverSize={detailPopoverSize}\n xTitle={xTitle}\n yTitle={yTitle}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n i18nStrings={i18nStrings}\n />\n )}\n </div>\n\n {showLegend && (\n <InternalBox margin={{ top: 'm' }}>\n <AreaChartLegend\n plotContainerRef={containerRef}\n model={model}\n legendTitle={legendTitle}\n ariaLabel={i18nStrings.legendAriaLabel}\n />\n </InternalBox>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { isDevelopment } from '../internal/is-development';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\n\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport ChartContainer from './chart-container';\nimport cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\nimport { warnOnce } from '../internal/logging';\nimport { nodeContains } from '../internal/utils/dom';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\ntype InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<\n AreaChartProps<T>,\n 'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalAreaChart<T extends AreaChartProps.DataTypes>({\n height,\n xScaleType,\n yScaleType,\n xDomain,\n yDomain,\n highlightedSeries: controlledHighlightedSeries,\n visibleSeries: controlledVisibleSeries,\n series: externalSeries,\n onFilterChange: controlledOnVisibleChange,\n onHighlightChange: controlledOnHighlightChange,\n i18nStrings,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n xTitle,\n yTitle,\n hideFilter,\n additionalFilters,\n hideLegend,\n legendTitle,\n statusType,\n detailPopoverSize,\n empty,\n noMatch,\n errorText,\n loadingText,\n recoveryText,\n onRecoveryClick,\n __internalRootRef = null,\n ...props\n}: InternalAreaChartProps<T>) {\n const baseProps = getBaseProps(props);\n const containerRef = useRef<HTMLDivElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n if (isDevelopment) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (!isSeriesValid(externalSeries)) {\n warnOnce(\n 'AreaChart',\n \"The `series` property violates the component's constraints: all `area` \" +\n 'series must have `data` arrays of the same length and with the same x-values.'\n );\n }\n }, [externalSeries]);\n }\n\n const [width, setWidth] = useState(0);\n const [visibleSeries, setVisibleSeries] = useFilterProps(\n externalSeries,\n controlledVisibleSeries,\n controlledOnVisibleChange\n );\n const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n externalSeries,\n controlledHighlightedSeries,\n controlledOnHighlightChange\n );\n const model = useChartModel({\n externalSeries,\n visibleSeries,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n popoverRef,\n });\n\n const { isEmpty, isNoMatch, showChart } = getChartStatus({\n externalData: externalSeries,\n visibleData: visibleSeries,\n statusType,\n });\n const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch);\n const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n const reserveLegendSpace = !showChart && !hideLegend;\n const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n useEffect(() => {\n const onKeyDown = model.handlers.onDocumentKeyDown;\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [model.handlers.onDocumentKeyDown]);\n\n const onBlur = (event: React.FocusEvent) => {\n if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n model.handlers.onContainerBlur();\n }\n };\n\n const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef} onBlur={onBlur}>\n {showFilters && (\n <InternalBox className={cartesianStyles['filter-container']} margin={{ bottom: 'l' }}>\n <InternalSpaceBetween\n size=\"l\"\n direction=\"horizontal\"\n className={clsx({ [styles['has-default-filter']]: !hideFilter })}\n >\n {!hideFilter && (\n <AreaChartFilter\n model={model}\n filterLabel={i18nStrings.filterLabel}\n filterPlaceholder={i18nStrings.filterPlaceholder}\n filterSelectedAriaLabel={i18nStrings.filterSelectedAriaLabel}\n />\n )}\n {additionalFilters}\n </InternalSpaceBetween>\n </InternalBox>\n )}\n\n <div\n className={clsx(styles.content, {\n [styles['content--reserve-filter']]: reserveFilterSpace,\n [styles['content--reserve-legend']]: reserveLegendSpace,\n })}\n style={{ minHeight: height }}\n >\n <ChartStatusContainer\n isEmpty={isEmpty}\n isNoMatch={isNoMatch}\n showChart={showChart}\n statusType={statusType}\n empty={empty}\n noMatch={noMatch}\n loadingText={loadingText}\n errorText={errorText}\n recoveryText={recoveryText}\n onRecoveryClick={onRecoveryClick}\n />\n {showChart && (\n <ChartContainer\n model={model}\n autoWidth={setWidth}\n detailPopoverSize={detailPopoverSize}\n xTitle={xTitle}\n yTitle={yTitle}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n i18nStrings={i18nStrings}\n />\n )}\n </div>\n\n {showLegend && (\n <InternalBox margin={{ top: 'm' }}>\n <AreaChartLegend\n plotContainerRef={containerRef}\n model={model}\n legendTitle={legendTitle}\n ariaLabel={i18nStrings.legendAriaLabel}\n />\n </InternalBox>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -13,8 +13,8 @@ export interface ChartModel<T extends AreaChartProps.DataTypes> {
|
|
|
13
13
|
getInternalSeries(series: AreaChartProps.Series<T>): ChartModel.InternalSeries<T>;
|
|
14
14
|
computed: ChartModel.ComputedProps<T>;
|
|
15
15
|
handlers: {
|
|
16
|
-
onSVGMouseMove: (event: React.MouseEvent<SVGElement
|
|
17
|
-
onSVGMouseOut: (event: React.MouseEvent<SVGElement
|
|
16
|
+
onSVGMouseMove: (event: React.MouseEvent<SVGElement>) => void;
|
|
17
|
+
onSVGMouseOut: (event: React.MouseEvent<SVGElement>) => void;
|
|
18
18
|
onSVGMouseDown: (event: React.MouseEvent<SVGSVGElement>) => void;
|
|
19
19
|
onSVGKeyDown: (event: React.KeyboardEvent) => void;
|
|
20
20
|
onSVGFocus: (event: React.FocusEvent<Element>, trigger: 'mouse' | 'keyboard') => void;
|
|
@@ -24,12 +24,14 @@ export interface ChartModel<T extends AreaChartProps.DataTypes> {
|
|
|
24
24
|
onPopoverDismiss: (outsideClick?: boolean) => void;
|
|
25
25
|
onContainerBlur: () => void;
|
|
26
26
|
onDocumentKeyDown: (event: KeyboardEvent) => void;
|
|
27
|
+
onPopoverLeave: (event: React.MouseEvent) => void;
|
|
27
28
|
};
|
|
28
29
|
interactions: ReadonlyAsyncStore<ChartModel.InteractionsState<T>>;
|
|
29
30
|
refs: {
|
|
30
31
|
plot: React.RefObject<ChartPlotRef>;
|
|
31
32
|
container: React.RefObject<HTMLDivElement>;
|
|
32
33
|
verticalMarker: React.RefObject<SVGLineElement>;
|
|
34
|
+
popoverRef: React.RefObject<HTMLElement>;
|
|
33
35
|
};
|
|
34
36
|
}
|
|
35
37
|
export declare namespace ChartModel {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACjG,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,SAAS,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/C,iBAAiB,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAClF,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACtC,QAAQ,EAAE;QACR,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/area-chart/model/index.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ChartSeriesMarkerType } from '../../internal/components/chart-series-marker';\nimport { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';\nimport { XDomain, YDomain } from '../../internal/components/cartesian-chart/interfaces';\nimport { ReadonlyAsyncStore } from './async-store';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\n\nexport interface ChartModel<T extends AreaChartProps.DataTypes> {\n height: number;\n width: number;\n series: readonly AreaChartProps.Series<T>[];\n allSeries: readonly AreaChartProps.Series<T>[];\n getInternalSeries(series: AreaChartProps.Series<T>): ChartModel.InternalSeries<T>;\n computed: ChartModel.ComputedProps<T>;\n handlers: {\n onSVGMouseMove: (event: React.MouseEvent<SVGElement
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/area-chart/model/index.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ChartSeriesMarkerType } from '../../internal/components/chart-series-marker';\nimport { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';\nimport { XDomain, YDomain } from '../../internal/components/cartesian-chart/interfaces';\nimport { ReadonlyAsyncStore } from './async-store';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\n\nexport interface ChartModel<T extends AreaChartProps.DataTypes> {\n height: number;\n width: number;\n series: readonly AreaChartProps.Series<T>[];\n allSeries: readonly AreaChartProps.Series<T>[];\n getInternalSeries(series: AreaChartProps.Series<T>): ChartModel.InternalSeries<T>;\n computed: ChartModel.ComputedProps<T>;\n handlers: {\n onSVGMouseMove: (event: React.MouseEvent<SVGElement>) => void;\n onSVGMouseOut: (event: React.MouseEvent<SVGElement>) => void;\n onSVGMouseDown: (event: React.MouseEvent<SVGSVGElement>) => void;\n onSVGKeyDown: (event: React.KeyboardEvent) => void;\n onSVGFocus: (event: React.FocusEvent<Element>, trigger: 'mouse' | 'keyboard') => void;\n onSVGBlur: (event: React.FocusEvent<Element>) => void;\n onFilterSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n onLegendHighlight: (series: null | AreaChartProps.Series<T>) => void;\n onPopoverDismiss: (outsideClick?: boolean) => void;\n onContainerBlur: () => void;\n onDocumentKeyDown: (event: KeyboardEvent) => void;\n onPopoverLeave: (event: React.MouseEvent) => void;\n };\n interactions: ReadonlyAsyncStore<ChartModel.InteractionsState<T>>;\n refs: {\n plot: React.RefObject<ChartPlotRef>;\n container: React.RefObject<HTMLDivElement>;\n verticalMarker: React.RefObject<SVGLineElement>;\n popoverRef: React.RefObject<HTMLElement>;\n };\n}\n\nexport namespace ChartModel {\n export interface ComputedProps<T extends AreaChartProps.DataTypes> {\n xDomain: XDomain<T>;\n yDomain: YDomain;\n xScale: ChartScale;\n yScale: NumericChartScale;\n xTicks: AreaChartProps.DataTypes[];\n yTicks: number[];\n plot: {\n xy: readonly PlotPoint<T>[][];\n xs: readonly PlotPoint<T>[][];\n sx: readonly PlotPoint<T>[][];\n };\n }\n\n export interface InteractionsState<T> {\n highlightedX: null | readonly PlotPoint<T>[];\n highlightedPoint: null | PlotPoint<T>;\n highlightedSeries: null | AreaChartProps.Series<T>;\n legendSeries: null | AreaChartProps.Series<T>;\n isPopoverPinned: boolean;\n }\n\n export interface InternalSeries<T> {\n series: AreaChartProps.Series<T>;\n title: string;\n color: string;\n markerType: ChartSeriesMarkerType;\n formatValue: (y: number, x: T) => string | number;\n }\n\n export interface PlotPoint<T> {\n x: T;\n y0: number;\n y1: number;\n scaled: { x: number; y0: number; y1: number };\n index: { x: number; y: number; s: number };\n value: number;\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AreaChartProps } from '../interfaces';
|
|
2
|
+
import { RefObject } from 'react';
|
|
2
3
|
import { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';
|
|
3
4
|
import { ChartModel } from './index';
|
|
4
5
|
export interface UseChartModelProps<T extends AreaChartProps.DataTypes> {
|
|
@@ -13,6 +14,7 @@ export interface UseChartModelProps<T extends AreaChartProps.DataTypes> {
|
|
|
13
14
|
yScaleType: YScaleType;
|
|
14
15
|
height: number;
|
|
15
16
|
width: number;
|
|
17
|
+
popoverRef: RefObject<HTMLElement>;
|
|
16
18
|
}
|
|
17
|
-
export default function useChartModel<T extends AreaChartProps.DataTypes>({ externalSeries: allSeries, visibleSeries: series, setVisibleSeries, highlightedSeries, setHighlightedSeries, xDomain, yDomain, xScaleType, yScaleType, height, width, }: UseChartModelProps<T>): ChartModel<T>;
|
|
19
|
+
export default function useChartModel<T extends AreaChartProps.DataTypes>({ externalSeries: allSeries, visibleSeries: series, setVisibleSeries, highlightedSeries, setHighlightedSeries, xDomain, yDomain, xScaleType, yScaleType, height, width, popoverRef, }: UseChartModelProps<T>): ChartModel<T>;
|
|
18
20
|
//# sourceMappingURL=use-chart-model.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-model.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"use-chart-model.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAc,EAA8B,SAAS,EAAc,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAMhH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQrC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS;IACpE,cAAc,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,aAAa,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,gBAAgB,EAAE,CAAC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACxE,iBAAiB,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACnD,oBAAoB,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC;AAGD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EACxE,cAAc,EAAE,SAAS,EACzB,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,EACL,UAAU,GACX,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAsTvC"}
|
|
@@ -10,9 +10,10 @@ import { useStableEventHandler } from '../../internal/hooks/use-stable-event-han
|
|
|
10
10
|
import { throttle } from '../../internal/utils/throttle';
|
|
11
11
|
var MAX_HOVER_MARGIN = 6;
|
|
12
12
|
var SVG_HOVER_THROTTLE = 25;
|
|
13
|
+
var POPOVER_DEADZONE = 12;
|
|
13
14
|
// Represents the core the chart logic, including the model of all allowed user interactions.
|
|
14
15
|
export default function useChartModel(_a) {
|
|
15
|
-
var allSeries = _a.externalSeries, series = _a.visibleSeries, setVisibleSeries = _a.setVisibleSeries, highlightedSeries = _a.highlightedSeries, setHighlightedSeries = _a.setHighlightedSeries, xDomain = _a.xDomain, yDomain = _a.yDomain, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, height = _a.height, width = _a.width;
|
|
16
|
+
var allSeries = _a.externalSeries, series = _a.visibleSeries, setVisibleSeries = _a.setVisibleSeries, highlightedSeries = _a.highlightedSeries, setHighlightedSeries = _a.setHighlightedSeries, xDomain = _a.xDomain, yDomain = _a.yDomain, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, height = _a.height, width = _a.width, popoverRef = _a.popoverRef;
|
|
16
17
|
// Chart elements refs used in handlers.
|
|
17
18
|
var plotRef = useRef(null);
|
|
18
19
|
var containerRef = useRef(null);
|
|
@@ -34,11 +35,27 @@ export default function useChartModel(_a) {
|
|
|
34
35
|
var containsMultipleSeries = interactions.series.length > 1;
|
|
35
36
|
// A series decorator to provide extra props such as color and marker type.
|
|
36
37
|
var getInternalSeries = createSeriesDecorator(allSeries);
|
|
38
|
+
var isMouseOverPopover = function (clientX, clientY) {
|
|
39
|
+
var _a;
|
|
40
|
+
if ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.firstChild) {
|
|
41
|
+
var popoverPosition = popoverRef.current.firstChild.getBoundingClientRect();
|
|
42
|
+
if (clientX > popoverPosition.x - POPOVER_DEADZONE &&
|
|
43
|
+
clientX < popoverPosition.x + popoverPosition.width + POPOVER_DEADZONE &&
|
|
44
|
+
clientY > popoverPosition.y - POPOVER_DEADZONE &&
|
|
45
|
+
clientY < popoverPosition.y + popoverPosition.height + POPOVER_DEADZONE) {
|
|
46
|
+
return true;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return false;
|
|
50
|
+
};
|
|
37
51
|
// A Callback for svg mouseover to hover the plot points.
|
|
38
52
|
// Throttling is necessary for a substantially smoother customer experience.
|
|
39
53
|
var onSVGMouseMoveThrottled = throttle(function (clientX, clientY) {
|
|
40
54
|
// No hover logic when the popover is pinned or no data available.
|
|
41
|
-
if (interactions.get().isPopoverPinned ||
|
|
55
|
+
if (interactions.get().isPopoverPinned ||
|
|
56
|
+
!plotRef.current ||
|
|
57
|
+
interactions.plot.xy.length === 0 ||
|
|
58
|
+
isMouseOverPopover(clientX, clientY)) {
|
|
42
59
|
return;
|
|
43
60
|
}
|
|
44
61
|
var svgRect = plotRef.current.svg.getBoundingClientRect();
|
|
@@ -65,8 +82,8 @@ export default function useChartModel(_a) {
|
|
|
65
82
|
// Because the mouseover is throttled, in can occur slightly after the mouseout,
|
|
66
83
|
// neglecting its effect; cancelling the throttled function prevents that.
|
|
67
84
|
onSVGMouseMoveThrottled.cancel();
|
|
68
|
-
// No hover logic when the popover is pinned
|
|
69
|
-
if (interactions.get().isPopoverPinned) {
|
|
85
|
+
// No hover logic when the popover is pinned or mouse is over popover
|
|
86
|
+
if (interactions.get().isPopoverPinned || isMouseOverPopover(event.clientX, event.clientY)) {
|
|
70
87
|
return;
|
|
71
88
|
}
|
|
72
89
|
// Check if the target is contained within svg to allow hovering on the popover body.
|
|
@@ -220,6 +237,13 @@ export default function useChartModel(_a) {
|
|
|
220
237
|
interactions.clearHighlightedLegend();
|
|
221
238
|
}
|
|
222
239
|
};
|
|
240
|
+
var onPopoverLeave = function (event) {
|
|
241
|
+
if (plotRef.current.svg.contains(event.relatedTarget) || interactions.get().isPopoverPinned) {
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
interactions.clearHighlight();
|
|
245
|
+
interactions.clearHighlightedLegend();
|
|
246
|
+
};
|
|
223
247
|
return {
|
|
224
248
|
width: width,
|
|
225
249
|
height: height,
|
|
@@ -239,15 +263,17 @@ export default function useChartModel(_a) {
|
|
|
239
263
|
onLegendHighlight: onLegendHighlight,
|
|
240
264
|
onPopoverDismiss: onPopoverDismiss,
|
|
241
265
|
onContainerBlur: onContainerBlur,
|
|
242
|
-
onDocumentKeyDown: onDocumentKeyDown
|
|
266
|
+
onDocumentKeyDown: onDocumentKeyDown,
|
|
267
|
+
onPopoverLeave: onPopoverLeave
|
|
243
268
|
},
|
|
244
269
|
refs: {
|
|
245
270
|
plot: plotRef,
|
|
246
271
|
container: containerRef,
|
|
247
|
-
verticalMarker: verticalMarkerRef
|
|
272
|
+
verticalMarker: verticalMarkerRef,
|
|
273
|
+
popoverRef: popoverRef
|
|
248
274
|
}
|
|
249
275
|
};
|
|
250
|
-
}, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);
|
|
276
|
+
}, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries, popoverRef]);
|
|
251
277
|
// Notify client when series highlight change.
|
|
252
278
|
useReaction(model.interactions, function (state) { return state.highlightedSeries; }, setHighlightedSeries);
|
|
253
279
|
// Update interactions store when series highlight in a controlled way.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { findClosest, circleIndex } from './utils';\n\nimport { nodeContains } from '../../internal/utils/dom';\nimport { KeyCode } from '../../internal/keycode';\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { useReaction } from './async-store';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport InteractionsStore from './interactions-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { ChartModel } from './index';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { throttle } from '../../internal/utils/throttle';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\n\nexport interface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n externalSeries: readonly AreaChartProps.Series<T>[];\n visibleSeries: readonly AreaChartProps.Series<T>[];\n setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n highlightedSeries: null | AreaChartProps.Series<T>;\n setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n xDomain?: XDomain<T>;\n yDomain?: YDomain;\n xScaleType: XScaleType;\n yScaleType: YScaleType;\n height: number;\n width: number;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n externalSeries: allSeries,\n visibleSeries: series,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n}: UseChartModelProps<T>): ChartModel<T> {\n // Chart elements refs used in handlers.\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);\n\n const model = useMemo(() => {\n // Compute scales, ticks and two-dimensional plots.\n const computed = computeChartProps({\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n });\n\n // A store for chart interactions that don't require plot recomputation.\n const interactions = new InteractionsStore(series, computed.plot);\n\n const containsMultipleSeries = interactions.series.length > 1;\n\n // A series decorator to provide extra props such as color and marker type.\n const getInternalSeries = createSeriesDecorator(allSeries);\n\n // A Callback for svg mouseover to hover the plot points.\n // Throttling is necessary for a substantially smoother customer experience.\n const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n // No hover logic when the popover is pinned or no data available.\n if (interactions.get().isPopoverPinned || !plotRef.current || interactions.plot.xy.length === 0) {\n return;\n }\n\n const svgRect = plotRef.current.svg.getBoundingClientRect();\n const offsetX = clientX - svgRect.left;\n const offsetY = clientY - svgRect.top;\n\n const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n // If close enough to the point - highlight the point and its column.\n // If not - only highlight the closest column.\n if (\n Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n ) {\n interactions.highlightPoint(closestPoint);\n } else {\n interactions.highlightX(closestX);\n }\n }, SVG_HOVER_THROTTLE);\n\n const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement, MouseEvent>) =>\n onSVGMouseMoveThrottled(clientX, clientY);\n\n // A callback for svg mouseout to clear all highlights.\n const onSVGMouseOut = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n // Because the mouseover is throttled, in can occur slightly after the mouseout,\n // neglecting its effect; cancelling the throttled function prevents that.\n onSVGMouseMoveThrottled.cancel();\n\n // No hover logic when the popover is pinned.\n if (interactions.get().isPopoverPinned) {\n return;\n }\n\n // Check if the target is contained within svg to allow hovering on the popover body.\n if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n interactions.clearHighlightedLegend();\n interactions.clearHighlight();\n }\n };\n\n // A callback for svg click to pin/unpin the popover.\n const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n interactions.togglePopoverPin();\n event.preventDefault();\n };\n\n const moveWithinXAxis = (direction: -1 | 1) => {\n if (interactions.get().highlightedPoint) {\n return moveWithinSeries(direction);\n } else if (containsMultipleSeries) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const currentXIndex = highlightedX[0].index.x;\n const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);\n interactions.highlightX(interactions.plot.xy[nextXIndex]);\n }\n }\n };\n\n // A helper function to highlight the next or previous point within selected series.\n const moveWithinSeries = (direction: -1 | 1) => {\n // Can only use motion when a particular point is highlighted.\n const point = interactions.get().highlightedPoint;\n if (!point) {\n return;\n }\n\n // Take the index of the currently highlighted series.\n const sIndex = point.index.s;\n // Take the incremented(circularly) x-index of the currently highlighted point.\n const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n // Highlight the next point using x:s grouped data.\n interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n };\n\n // A helper function to highlight the next or previous point within the selected column.\n const moveBetweenSeries = (direction: -1 | 1) => {\n const point = interactions.get().highlightedPoint;\n if (!point) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const xIndex = highlightedX[0].index.x;\n const points = interactions.plot.xy[xIndex];\n const yIndex = direction === 1 ? 0 : points.length - 1;\n interactions.highlightPoint(points[yIndex]);\n }\n return;\n }\n\n // Take the index of the currently highlighted column.\n const xIndex = point.index.x;\n const currentYIndex = point.index.y;\n\n if (\n containsMultipleSeries &&\n ((currentYIndex === 0 && direction === -1) ||\n (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))\n ) {\n interactions.highlightX(interactions.plot.xy[xIndex]);\n } else {\n // Take the incremented(circularly) y-index of the currently highlighted point.\n const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n // Highlight the next point using x:y grouped data.\n interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);\n }\n };\n\n // A callback for svg keydown to enable motions and popover pin with the keyboard.\n const onSVGKeyDown = (event: React.KeyboardEvent) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.up &&\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.down &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.space &&\n keyCode !== KeyCode.enter\n ) {\n return;\n }\n\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n // No keydown logic when the popover is pinned.\n if (interactions.get().isPopoverPinned) {\n return;\n }\n\n // Move up/down.\n if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);\n }\n // Move left/right.\n else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n moveWithinXAxis(keyCode === KeyCode.right ? 1 : -1);\n }\n // Pin popover.\n else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n interactions.pinPopover();\n }\n };\n\n const highlightFirstX = () => {\n interactions.highlightX(interactions.plot.xy[0]);\n };\n\n // A callback for svg focus to highlight series.\n const onSVGFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n // When focus is caused by a click event nothing is expected as clicks are handled separately.\n if (trigger === 'keyboard') {\n const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();\n if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {\n highlightFirstX();\n } else if (!highlightedX) {\n interactions.highlightFirstPoint();\n }\n }\n };\n\n // A callback for svg blur to clear all highlights unless the popover is pinned.\n const onSVGBlur = () => {\n // Pinned popover stays pinned even if the focus is lost.\n // If blur is not caused by the popover, forget the previously highlighted point.\n if (!interactions.get().isPopoverPinned) {\n interactions.clearHighlight();\n }\n };\n\n const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n stableSetVisibleSeries(series);\n };\n\n const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n interactions.highlightSeries(series);\n };\n\n const onPopoverDismiss = (outsideClick?: boolean) => {\n interactions.unpinPopover();\n\n // Return focus back to the application or plot (when no point is highlighted).\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n if (interactions.get().highlightedPoint || interactions.get().highlightedX) {\n plotRef.current!.focusApplication();\n } else {\n interactions.clearHighlight();\n plotRef.current!.focusPlot();\n }\n }, 0);\n }\n };\n\n const onContainerBlur = () => {\n interactions.clearState();\n };\n\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n }\n };\n\n return {\n width,\n height,\n series,\n allSeries,\n getInternalSeries,\n computed,\n interactions,\n handlers: {\n onSVGMouseMove,\n onSVGMouseOut,\n onSVGMouseDown,\n onSVGKeyDown,\n onSVGFocus,\n onSVGBlur,\n onFilterSeries,\n onLegendHighlight,\n onPopoverDismiss,\n onContainerBlur,\n onDocumentKeyDown,\n },\n refs: {\n plot: plotRef,\n container: containerRef,\n verticalMarker: verticalMarkerRef,\n },\n };\n }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);\n\n // Notify client when series highlight change.\n useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n // Update interactions store when series highlight in a controlled way.\n useEffect(() => {\n if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n model.interactions.highlightSeries(highlightedSeries);\n }\n }, [model, highlightedSeries]);\n\n return model;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport React, { useEffect, useMemo, useRef, RefObject, MouseEvent } from 'react';\nimport { findClosest, circleIndex } from './utils';\n\nimport { nodeContains } from '../../internal/utils/dom';\nimport { KeyCode } from '../../internal/keycode';\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { useReaction } from './async-store';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport InteractionsStore from './interactions-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { ChartModel } from './index';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { throttle } from '../../internal/utils/throttle';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\nconst POPOVER_DEADZONE = 12;\n\nexport interface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n externalSeries: readonly AreaChartProps.Series<T>[];\n visibleSeries: readonly AreaChartProps.Series<T>[];\n setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n highlightedSeries: null | AreaChartProps.Series<T>;\n setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n xDomain?: XDomain<T>;\n yDomain?: YDomain;\n xScaleType: XScaleType;\n yScaleType: YScaleType;\n height: number;\n width: number;\n popoverRef: RefObject<HTMLElement>;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n externalSeries: allSeries,\n visibleSeries: series,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n popoverRef,\n}: UseChartModelProps<T>): ChartModel<T> {\n // Chart elements refs used in handlers.\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);\n\n const model = useMemo(() => {\n // Compute scales, ticks and two-dimensional plots.\n const computed = computeChartProps({\n series,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n });\n\n // A store for chart interactions that don't require plot recomputation.\n const interactions = new InteractionsStore(series, computed.plot);\n\n const containsMultipleSeries = interactions.series.length > 1;\n\n // A series decorator to provide extra props such as color and marker type.\n const getInternalSeries = createSeriesDecorator(allSeries);\n\n const isMouseOverPopover = (clientX: number, clientY: number) => {\n if (popoverRef.current?.firstChild) {\n const popoverPosition = (popoverRef.current.firstChild as HTMLElement).getBoundingClientRect();\n if (\n clientX > popoverPosition.x - POPOVER_DEADZONE &&\n clientX < popoverPosition.x + popoverPosition.width + POPOVER_DEADZONE &&\n clientY > popoverPosition.y - POPOVER_DEADZONE &&\n clientY < popoverPosition.y + popoverPosition.height + POPOVER_DEADZONE\n ) {\n return true;\n }\n }\n return false;\n };\n\n // A Callback for svg mouseover to hover the plot points.\n // Throttling is necessary for a substantially smoother customer experience.\n const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n // No hover logic when the popover is pinned or no data available.\n if (\n interactions.get().isPopoverPinned ||\n !plotRef.current ||\n interactions.plot.xy.length === 0 ||\n isMouseOverPopover(clientX, clientY)\n ) {\n return;\n }\n\n const svgRect = plotRef.current.svg.getBoundingClientRect();\n const offsetX = clientX - svgRect.left;\n const offsetY = clientY - svgRect.top;\n\n const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n // If close enough to the point - highlight the point and its column.\n // If not - only highlight the closest column.\n if (\n Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n ) {\n interactions.highlightPoint(closestPoint);\n } else {\n interactions.highlightX(closestX);\n }\n }, SVG_HOVER_THROTTLE);\n\n const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement>) =>\n onSVGMouseMoveThrottled(clientX, clientY);\n\n // A callback for svg mouseout to clear all highlights.\n const onSVGMouseOut = (event: React.MouseEvent<SVGElement>) => {\n // Because the mouseover is throttled, in can occur slightly after the mouseout,\n // neglecting its effect; cancelling the throttled function prevents that.\n onSVGMouseMoveThrottled.cancel();\n\n // No hover logic when the popover is pinned or mouse is over popover\n if (interactions.get().isPopoverPinned || isMouseOverPopover(event.clientX, event.clientY)) {\n return;\n }\n\n // Check if the target is contained within svg to allow hovering on the popover body.\n if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n interactions.clearHighlightedLegend();\n interactions.clearHighlight();\n }\n };\n\n // A callback for svg click to pin/unpin the popover.\n const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n interactions.togglePopoverPin();\n event.preventDefault();\n };\n\n const moveWithinXAxis = (direction: -1 | 1) => {\n if (interactions.get().highlightedPoint) {\n return moveWithinSeries(direction);\n } else if (containsMultipleSeries) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const currentXIndex = highlightedX[0].index.x;\n const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);\n interactions.highlightX(interactions.plot.xy[nextXIndex]);\n }\n }\n };\n\n // A helper function to highlight the next or previous point within selected series.\n const moveWithinSeries = (direction: -1 | 1) => {\n // Can only use motion when a particular point is highlighted.\n const point = interactions.get().highlightedPoint;\n if (!point) {\n return;\n }\n\n // Take the index of the currently highlighted series.\n const sIndex = point.index.s;\n // Take the incremented(circularly) x-index of the currently highlighted point.\n const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n // Highlight the next point using x:s grouped data.\n interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n };\n\n // A helper function to highlight the next or previous point within the selected column.\n const moveBetweenSeries = (direction: -1 | 1) => {\n const point = interactions.get().highlightedPoint;\n if (!point) {\n const { highlightedX } = interactions.get();\n if (highlightedX) {\n const xIndex = highlightedX[0].index.x;\n const points = interactions.plot.xy[xIndex];\n const yIndex = direction === 1 ? 0 : points.length - 1;\n interactions.highlightPoint(points[yIndex]);\n }\n return;\n }\n\n // Take the index of the currently highlighted column.\n const xIndex = point.index.x;\n const currentYIndex = point.index.y;\n\n if (\n containsMultipleSeries &&\n ((currentYIndex === 0 && direction === -1) ||\n (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))\n ) {\n interactions.highlightX(interactions.plot.xy[xIndex]);\n } else {\n // Take the incremented(circularly) y-index of the currently highlighted point.\n const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n // Highlight the next point using x:y grouped data.\n interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);\n }\n };\n\n // A callback for svg keydown to enable motions and popover pin with the keyboard.\n const onSVGKeyDown = (event: React.KeyboardEvent) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.up &&\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.down &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.space &&\n keyCode !== KeyCode.enter\n ) {\n return;\n }\n\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n // No keydown logic when the popover is pinned.\n if (interactions.get().isPopoverPinned) {\n return;\n }\n\n // Move up/down.\n if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);\n }\n // Move left/right.\n else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n moveWithinXAxis(keyCode === KeyCode.right ? 1 : -1);\n }\n // Pin popover.\n else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n interactions.pinPopover();\n }\n };\n\n const highlightFirstX = () => {\n interactions.highlightX(interactions.plot.xy[0]);\n };\n\n // A callback for svg focus to highlight series.\n const onSVGFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n // When focus is caused by a click event nothing is expected as clicks are handled separately.\n if (trigger === 'keyboard') {\n const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();\n if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {\n highlightFirstX();\n } else if (!highlightedX) {\n interactions.highlightFirstPoint();\n }\n }\n };\n\n // A callback for svg blur to clear all highlights unless the popover is pinned.\n const onSVGBlur = () => {\n // Pinned popover stays pinned even if the focus is lost.\n // If blur is not caused by the popover, forget the previously highlighted point.\n if (!interactions.get().isPopoverPinned) {\n interactions.clearHighlight();\n }\n };\n\n const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n stableSetVisibleSeries(series);\n };\n\n const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n interactions.highlightSeries(series);\n };\n\n const onPopoverDismiss = (outsideClick?: boolean) => {\n interactions.unpinPopover();\n\n // Return focus back to the application or plot (when no point is highlighted).\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n if (interactions.get().highlightedPoint || interactions.get().highlightedX) {\n plotRef.current!.focusApplication();\n } else {\n interactions.clearHighlight();\n plotRef.current!.focusPlot();\n }\n }, 0);\n }\n };\n\n const onContainerBlur = () => {\n interactions.clearState();\n };\n\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n }\n };\n\n const onPopoverLeave = (event: MouseEvent) => {\n if (plotRef.current!.svg.contains(event.relatedTarget as Node) || interactions.get().isPopoverPinned) {\n return;\n }\n interactions.clearHighlight();\n interactions.clearHighlightedLegend();\n };\n return {\n width,\n height,\n series,\n allSeries,\n getInternalSeries,\n computed,\n interactions,\n handlers: {\n onSVGMouseMove,\n onSVGMouseOut,\n onSVGMouseDown,\n onSVGKeyDown,\n onSVGFocus,\n onSVGBlur,\n onFilterSeries,\n onLegendHighlight,\n onPopoverDismiss,\n onContainerBlur,\n onDocumentKeyDown,\n onPopoverLeave,\n },\n refs: {\n plot: plotRef,\n container: containerRef,\n verticalMarker: verticalMarkerRef,\n popoverRef,\n },\n };\n }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries, popoverRef]);\n\n // Notify client when series highlight change.\n useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n // Update interactions store when series highlight in a controlled way.\n useEffect(() => {\n if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n model.interactions.highlightSeries(highlightedSeries);\n }\n }, [model, highlightedSeries]);\n\n return model;\n}\n"]}
|
|
@@ -19,8 +19,13 @@ export interface ChartPopoverProps extends PopoverProps {
|
|
|
19
19
|
container: Element | null;
|
|
20
20
|
/** Event that is fired when the popover is dismissed */
|
|
21
21
|
onDismiss: (outsideClick?: boolean) => void;
|
|
22
|
+
/** Fired when the pointer enters the hoverable area around the popover */
|
|
23
|
+
onMouseEnter?: (event: React.MouseEvent) => void;
|
|
24
|
+
/** Fired when the pointer leaves the hoverable area around the popover */
|
|
25
|
+
onMouseLeave?: (event: React.MouseEvent) => void;
|
|
22
26
|
/** Popover content */
|
|
23
27
|
children?: React.ReactNode;
|
|
24
28
|
}
|
|
25
|
-
|
|
29
|
+
declare const _default: React.ForwardRefExoticComponent<ChartPopoverProps & React.RefAttributes<HTMLElement>>;
|
|
30
|
+
export default _default;
|
|
26
31
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAS3D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,+FAA+F;IAC/F,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,wDAAwD;IACxD,SAAS,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;;AAED,wBAA8C"}
|
|
@@ -8,16 +8,19 @@ import PopoverContainer from '../../../popover/container';
|
|
|
8
8
|
import PopoverBody from '../../../popover/body';
|
|
9
9
|
import popoverStyles from '../../../popover/styles.css.js';
|
|
10
10
|
import { nodeContains } from '../../utils/dom';
|
|
11
|
+
import { useMergeRefs } from '../../hooks/use-merge-refs';
|
|
11
12
|
import styles from './styles.css.js';
|
|
12
|
-
export default
|
|
13
|
+
export default React.forwardRef(ChartPopover);
|
|
14
|
+
function ChartPopover(_a, ref) {
|
|
13
15
|
var _b;
|
|
14
|
-
var _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.fixedWidth, fixedWidth = _e === void 0 ? false : _e, _f = _a.dismissButton, dismissButton = _f === void 0 ? false : _f, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, title = _a.title, trackRef = _a.trackRef, trackKey = _a.trackKey, onDismiss = _a.onDismiss, container = _a.container, restProps = __rest(_a, ["position", "size", "fixedWidth", "dismissButton", "dismissAriaLabel", "children", "title", "trackRef", "trackKey", "onDismiss", "container"]);
|
|
16
|
+
var _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.fixedWidth, fixedWidth = _e === void 0 ? false : _e, _f = _a.dismissButton, dismissButton = _f === void 0 ? false : _f, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, title = _a.title, trackRef = _a.trackRef, trackKey = _a.trackKey, onDismiss = _a.onDismiss, container = _a.container, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, restProps = __rest(_a, ["position", "size", "fixedWidth", "dismissButton", "dismissAriaLabel", "children", "title", "trackRef", "trackKey", "onDismiss", "container", "onMouseEnter", "onMouseLeave"]);
|
|
15
17
|
var baseProps = getBaseProps(restProps);
|
|
16
|
-
var
|
|
18
|
+
var popoverObjectRef = useRef(null);
|
|
19
|
+
var popoverRef = useMergeRefs(popoverObjectRef, ref);
|
|
17
20
|
useEffect(function () {
|
|
18
21
|
var onDocumentClick = function (event) {
|
|
19
22
|
if (event.target &&
|
|
20
|
-
!nodeContains(
|
|
23
|
+
!nodeContains(popoverObjectRef.current, event.target) && // click not in popover
|
|
21
24
|
!nodeContains(container, event.target) // click not in segment
|
|
22
25
|
) {
|
|
23
26
|
onDismiss(true);
|
|
@@ -28,10 +31,11 @@ export default function ChartPopover(_a) {
|
|
|
28
31
|
document.removeEventListener('mousedown', onDocumentClick, { capture: true });
|
|
29
32
|
};
|
|
30
33
|
}, [container, onDismiss]);
|
|
31
|
-
return (React.createElement("div", __assign({}, baseProps, { className: clsx(popoverStyles.root, styles.root, baseProps.className, (_b = {}, _b[styles.dismissable] = dismissButton, _b)), ref: popoverRef }),
|
|
34
|
+
return (React.createElement("div", __assign({}, baseProps, { className: clsx(popoverStyles.root, styles.root, baseProps.className, (_b = {}, _b[styles.dismissable] = dismissButton, _b)), ref: popoverRef, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
|
|
32
35
|
React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: trackRef, trackKey: trackKey, arrow: function (position) { return (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles["arrow-position-".concat(position)]) },
|
|
33
36
|
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
|
|
34
37
|
React.createElement("div", { className: popoverStyles['arrow-inner'] }))); } },
|
|
35
|
-
React.createElement(
|
|
38
|
+
React.createElement("div", { className: styles['hover-area'] },
|
|
39
|
+
React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: title, onDismiss: onDismiss, className: styles['popover-body'] }, children)))));
|
|
36
40
|
}
|
|
37
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../../base-component';\n\nimport { PopoverProps } from '../../../popover/interfaces';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport { nodeContains } from '../../utils/dom';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\n\nimport styles from './styles.css.js';\n\nexport interface ChartPopoverProps extends PopoverProps {\n /** Title of the popover */\n title?: React.ReactNode;\n\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<Element>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n\n /** Optional container element that prevents any clicks in there from dismissing the popover */\n container: Element | null;\n\n /** Event that is fired when the popover is dismissed */\n onDismiss: (outsideClick?: boolean) => void;\n\n /** Fired when the pointer enters the hoverable area around the popover */\n onMouseEnter?: (event: React.MouseEvent) => void;\n\n /** Fired when the pointer leaves the hoverable area around the popover */\n onMouseLeave?: (event: React.MouseEvent) => void;\n\n /** Popover content */\n children?: React.ReactNode;\n}\n\nexport default React.forwardRef(ChartPopover);\n\nfunction ChartPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n dismissButton = false,\n dismissAriaLabel,\n\n children,\n\n title,\n trackRef,\n trackKey,\n onDismiss,\n container,\n\n onMouseEnter,\n onMouseLeave,\n\n ...restProps\n }: ChartPopoverProps,\n ref: React.Ref<HTMLElement>\n) {\n const baseProps = getBaseProps(restProps);\n const popoverObjectRef = useRef<HTMLDivElement | null>(null);\n\n const popoverRef = useMergeRefs(popoverObjectRef, ref);\n\n useEffect(() => {\n const onDocumentClick = (event: MouseEvent) => {\n if (\n event.target &&\n !nodeContains(popoverObjectRef.current, event.target as Element) && // click not in popover\n !nodeContains(container, event.target as Element) // click not in segment\n ) {\n onDismiss(true);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick, { capture: true });\n return () => {\n document.removeEventListener('mousedown', onDocumentClick, { capture: true });\n };\n }, [container, onDismiss]);\n\n return (\n <div\n {...baseProps}\n className={clsx(popoverStyles.root, styles.root, baseProps.className, { [styles.dismissable]: dismissButton })}\n ref={popoverRef}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={trackRef}\n trackKey={trackKey}\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <div className={styles['hover-area']}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={title}\n onDismiss={onDismiss}\n className={styles['popover-body']}\n >\n {children}\n </PopoverBody>\n </div>\n </PopoverContainer>\n </div>\n );\n}\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"
|
|
4
|
+
"root": "awsui_root_1t44z_jfd1g_93",
|
|
5
|
+
"hover-area": "awsui_hover-area_1t44z_jfd1g_105",
|
|
6
|
+
"popover-body": "awsui_popover-body_1t44z_jfd1g_111"
|
|
6
7
|
};
|
|
7
8
|
|
|
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
93
|
+
.awsui_root_1t44z_jfd1g_93:not(#\9) {
|
|
94
94
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
95
95
|
border-collapse: separate;
|
|
96
96
|
border-spacing: 0;
|
|
@@ -126,8 +126,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
126
126
|
font-weight: 400;
|
|
127
127
|
font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
128
128
|
position: absolute;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.awsui_hover-area_1t44z_jfd1g_105:not(#\9) {
|
|
129
132
|
pointer-events: none;
|
|
133
|
+
padding: var(--space-static-s-phfs7n, 12px);
|
|
134
|
+
margin: calc(-1 * var(--space-static-s-phfs7n, 12px));
|
|
130
135
|
}
|
|
131
|
-
|
|
136
|
+
|
|
137
|
+
.awsui_popover-body_1t44z_jfd1g_111:not(#\9) {
|
|
132
138
|
pointer-events: auto;
|
|
133
139
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"
|
|
5
|
+
"root": "awsui_root_1t44z_jfd1g_93",
|
|
6
|
+
"hover-area": "awsui_hover-area_1t44z_jfd1g_105",
|
|
7
|
+
"popover-body": "awsui_popover-body_1t44z_jfd1g_111"
|
|
7
8
|
};
|
|
8
9
|
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED