@kubit-ui-web/react-charts 1.10.0 → 1.11.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.
Files changed (98) hide show
  1. package/dist/cjs/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts +3 -0
  2. package/dist/cjs/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts.map +1 -0
  3. package/dist/cjs/charts/customBackgroundChart/context/customBackgroundChartContext.js +3 -0
  4. package/dist/cjs/charts/customBackgroundChart/context/index.d.ts +2 -0
  5. package/dist/cjs/charts/customBackgroundChart/context/index.d.ts.map +1 -0
  6. package/dist/cjs/charts/customBackgroundChart/context/index.js +1 -0
  7. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.d.ts +6 -0
  8. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.d.ts.map +1 -0
  9. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.js +7 -0
  10. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.type.d.ts +50 -0
  11. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.type.d.ts.map +1 -0
  12. package/dist/cjs/charts/customBackgroundChart/customBackgroundChart.type.js +1 -0
  13. package/dist/cjs/charts/customBackgroundChart/customBackgroundChartStructure.d.ts +4 -0
  14. package/dist/cjs/charts/customBackgroundChart/customBackgroundChartStructure.d.ts.map +1 -0
  15. package/dist/cjs/charts/customBackgroundChart/customBackgroundChartStructure.js +41 -0
  16. package/dist/cjs/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts +4 -0
  17. package/dist/cjs/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts.map +1 -0
  18. package/dist/cjs/charts/customBackgroundChart/fragments/customBackgroundChartPlot.js +49 -0
  19. package/dist/cjs/charts/customBackgroundChart/fragments/index.d.ts +2 -0
  20. package/dist/cjs/charts/customBackgroundChart/fragments/index.d.ts.map +1 -0
  21. package/dist/cjs/charts/customBackgroundChart/fragments/index.js +1 -0
  22. package/dist/cjs/charts/customBackgroundChart/index.d.ts +2 -0
  23. package/dist/cjs/charts/customBackgroundChart/index.d.ts.map +1 -0
  24. package/dist/cjs/charts/customBackgroundChart/index.js +1 -0
  25. package/dist/cjs/charts/customBackgroundChart/utils/accessibility.d.ts +19 -0
  26. package/dist/cjs/charts/customBackgroundChart/utils/accessibility.d.ts.map +1 -0
  27. package/dist/cjs/charts/customBackgroundChart/utils/accessibility.js +32 -0
  28. package/dist/cjs/charts/index.d.ts +1 -0
  29. package/dist/cjs/charts/index.d.ts.map +1 -1
  30. package/dist/cjs/charts/index.js +1 -0
  31. package/dist/cjs/components/plot/plot.d.ts.map +1 -1
  32. package/dist/cjs/components/plot/plot.js +21 -3
  33. package/dist/cjs/types/errors.type.d.ts +2 -0
  34. package/dist/cjs/types/errors.type.d.ts.map +1 -1
  35. package/dist/cjs/types/errors.type.js +3 -0
  36. package/dist/esm/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts +3 -0
  37. package/dist/esm/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts.map +1 -0
  38. package/dist/esm/charts/customBackgroundChart/context/customBackgroundChartContext.js +3 -0
  39. package/dist/esm/charts/customBackgroundChart/context/index.d.ts +2 -0
  40. package/dist/esm/charts/customBackgroundChart/context/index.d.ts.map +1 -0
  41. package/dist/esm/charts/customBackgroundChart/context/index.js +1 -0
  42. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.d.ts +6 -0
  43. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.d.ts.map +1 -0
  44. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.js +7 -0
  45. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.type.d.ts +50 -0
  46. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.type.d.ts.map +1 -0
  47. package/dist/esm/charts/customBackgroundChart/customBackgroundChart.type.js +1 -0
  48. package/dist/esm/charts/customBackgroundChart/customBackgroundChartStructure.d.ts +4 -0
  49. package/dist/esm/charts/customBackgroundChart/customBackgroundChartStructure.d.ts.map +1 -0
  50. package/dist/esm/charts/customBackgroundChart/customBackgroundChartStructure.js +41 -0
  51. package/dist/esm/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts +4 -0
  52. package/dist/esm/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts.map +1 -0
  53. package/dist/esm/charts/customBackgroundChart/fragments/customBackgroundChartPlot.js +49 -0
  54. package/dist/esm/charts/customBackgroundChart/fragments/index.d.ts +2 -0
  55. package/dist/esm/charts/customBackgroundChart/fragments/index.d.ts.map +1 -0
  56. package/dist/esm/charts/customBackgroundChart/fragments/index.js +1 -0
  57. package/dist/esm/charts/customBackgroundChart/index.d.ts +2 -0
  58. package/dist/esm/charts/customBackgroundChart/index.d.ts.map +1 -0
  59. package/dist/esm/charts/customBackgroundChart/index.js +1 -0
  60. package/dist/esm/charts/customBackgroundChart/utils/accessibility.d.ts +19 -0
  61. package/dist/esm/charts/customBackgroundChart/utils/accessibility.d.ts.map +1 -0
  62. package/dist/esm/charts/customBackgroundChart/utils/accessibility.js +32 -0
  63. package/dist/esm/charts/index.d.ts +1 -0
  64. package/dist/esm/charts/index.d.ts.map +1 -1
  65. package/dist/esm/charts/index.js +1 -0
  66. package/dist/esm/components/plot/plot.d.ts.map +1 -1
  67. package/dist/esm/components/plot/plot.js +21 -3
  68. package/dist/esm/types/errors.type.d.ts +2 -0
  69. package/dist/esm/types/errors.type.d.ts.map +1 -1
  70. package/dist/esm/types/errors.type.js +3 -0
  71. package/dist/kubit-ui-web-react-charts.cjs.js +1 -1
  72. package/dist/kubit-ui-web-react-charts.es.js +1 -1
  73. package/dist/kubit-ui-web-react-charts.umd.js +1 -1
  74. package/dist/react-charts.css +1 -1
  75. package/dist/types/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts +3 -0
  76. package/dist/types/charts/customBackgroundChart/context/customBackgroundChartContext.d.ts.map +1 -0
  77. package/dist/types/charts/customBackgroundChart/context/index.d.ts +2 -0
  78. package/dist/types/charts/customBackgroundChart/context/index.d.ts.map +1 -0
  79. package/dist/types/charts/customBackgroundChart/customBackgroundChart.d.ts +6 -0
  80. package/dist/types/charts/customBackgroundChart/customBackgroundChart.d.ts.map +1 -0
  81. package/dist/types/charts/customBackgroundChart/customBackgroundChart.type.d.ts +50 -0
  82. package/dist/types/charts/customBackgroundChart/customBackgroundChart.type.d.ts.map +1 -0
  83. package/dist/types/charts/customBackgroundChart/customBackgroundChartStructure.d.ts +4 -0
  84. package/dist/types/charts/customBackgroundChart/customBackgroundChartStructure.d.ts.map +1 -0
  85. package/dist/types/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts +4 -0
  86. package/dist/types/charts/customBackgroundChart/fragments/customBackgroundChartPlot.d.ts.map +1 -0
  87. package/dist/types/charts/customBackgroundChart/fragments/index.d.ts +2 -0
  88. package/dist/types/charts/customBackgroundChart/fragments/index.d.ts.map +1 -0
  89. package/dist/types/charts/customBackgroundChart/index.d.ts +2 -0
  90. package/dist/types/charts/customBackgroundChart/index.d.ts.map +1 -0
  91. package/dist/types/charts/customBackgroundChart/utils/accessibility.d.ts +19 -0
  92. package/dist/types/charts/customBackgroundChart/utils/accessibility.d.ts.map +1 -0
  93. package/dist/types/charts/index.d.ts +1 -0
  94. package/dist/types/charts/index.d.ts.map +1 -1
  95. package/dist/types/components/plot/plot.d.ts.map +1 -1
  96. package/dist/types/types/errors.type.d.ts +2 -0
  97. package/dist/types/types/errors.type.d.ts.map +1 -1
  98. package/package.json +1 -1
@@ -0,0 +1,3 @@
1
+ import type { CustomBackgroundChartContextType } from '../customBackgroundChart.type';
2
+ export declare const CustomBackgroundChartContext: import("react").Context<CustomBackgroundChartContextType<any>>;
3
+ //# sourceMappingURL=customBackgroundChartContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartContext.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/context/customBackgroundChartContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAGtF,eAAO,MAAM,4BAA4B,gEAExC,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { createContext } from 'react';
2
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
3
+ export const CustomBackgroundChartContext = createContext({});
@@ -0,0 +1,2 @@
1
+ export { CustomBackgroundChartContext } from './customBackgroundChartContext';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC"}
@@ -0,0 +1 @@
1
+ export { CustomBackgroundChartContext } from './customBackgroundChartContext';
@@ -0,0 +1,6 @@
1
+ declare const CustomBackgroundChart: (<T = number>({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp, height, onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role, tabIndex, viewBox, width, ...props }: import("./customBackgroundChart.type").CustomBackgroundChartProps<T>) => import("react").ReactElement) & {
2
+ Plot: <T = number>({ ariaLabel, dataKey, formatAriaValue, ...props }: import("./customBackgroundChart.type").CustomBackgroundChartPlotProps<T>) => import("react").ReactElement | null;
3
+ };
4
+ export { CustomBackgroundChart };
5
+ export * from './customBackgroundChart.type';
6
+ //# sourceMappingURL=customBackgroundChart.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChart.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChart.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,qBAAqB;;CAEzB,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,cAAc,8BAA8B,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { CustomBackgroundChartStructure } from './customBackgroundChartStructure';
2
+ import { CustomBackgroundChartPlot } from './fragments/customBackgroundChartPlot';
3
+ const CustomBackgroundChart = Object.assign(CustomBackgroundChartStructure, {
4
+ Plot: CustomBackgroundChartPlot,
5
+ });
6
+ export { CustomBackgroundChart };
7
+ export * from './customBackgroundChart.type';
@@ -0,0 +1,50 @@
1
+ import type { PlotProps } from '../../components/plot/plot.types';
2
+ import type { ChartError, ChartErrorCollection, ErrorType } from '../../types/errors.type';
3
+ export interface CustomBackgroundDataPoint<T = number> {
4
+ x: number;
5
+ y: number;
6
+ value: T;
7
+ name?: string;
8
+ }
9
+ export type CustomBackgroundData<T = number> = Record<string, CustomBackgroundDataPoint<T>>;
10
+ export interface ViewBoxDimensions {
11
+ width: number;
12
+ height: number;
13
+ }
14
+ export interface CustomBackgroundChartProps<T = number> {
15
+ data: CustomBackgroundData<T>;
16
+ backgroundUrl: string;
17
+ viewBox: ViewBoxDimensions;
18
+ width?: string | number;
19
+ height?: string | number;
20
+ children?: React.ReactNode;
21
+ ariaLabel?: string;
22
+ ariaHidden?: boolean;
23
+ role?: string;
24
+ tabIndex?: number;
25
+ caption?: string;
26
+ className?: string;
27
+ dataTestId?: string;
28
+ onErrors?: (errors: ChartErrorCollection) => void;
29
+ onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
30
+ onDoubleClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
31
+ onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
32
+ onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
33
+ onFocus?: (event: React.FocusEvent<SVGElement>) => void;
34
+ onBlur?: (event: React.FocusEvent<SVGElement>) => void;
35
+ onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
36
+ onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
37
+ }
38
+ export interface CustomBackgroundChartPlotProps<T = number> extends Omit<PlotProps<T>, 'position' | 'data' | 'label'> {
39
+ dataKey: string;
40
+ /** Supports placeholders: {{dataKey}}, {{name}}, {{value}}, {{x}}, {{y}} */
41
+ ariaLabel?: string;
42
+ formatAriaValue?: (value: T) => string;
43
+ }
44
+ export interface CustomBackgroundChartContextType<T = number> {
45
+ data: CustomBackgroundData<T>;
46
+ viewBox: ViewBoxDimensions;
47
+ dataTestId: string;
48
+ addError?: (errorType: keyof typeof ErrorType, error: Omit<ChartError, 'type'>) => void;
49
+ }
50
+ //# sourceMappingURL=customBackgroundChart.type.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChart.type.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChart.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEvF,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,MAAM;IACnD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5F,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,GAAG,MAAM;IACpD,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACvD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,8BAA8B,CAAC,CAAC,GAAG,MAAM,CACxD,SAAQ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,gCAAgC,CAAC,CAAC,GAAG,MAAM;IAC1D,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACzF"}
@@ -0,0 +1,4 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { CustomBackgroundChartProps } from './customBackgroundChart.type';
3
+ export declare const CustomBackgroundChartStructure: <T = number>({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp, height, onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role, tabIndex, viewBox, width, ...props }: CustomBackgroundChartProps<T>) => ReactElement;
4
+ //# sourceMappingURL=customBackgroundChartStructure.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,OAAO,CAAC;AAQ9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,8BAA8B,GAAI,CAAC,GAAG,MAAM,EAAG,+PAwBzD,0BAA0B,CAAC,CAAC,CAAC,KAAG,YAiFlC,CAAC"}
@@ -0,0 +1,41 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useMemo } from 'react';
3
+ import { SvgContainer } from '../../components/svgContainer/svgContainer';
4
+ import { useId } from '../../hooks/useId/useId';
5
+ import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
6
+ import { CustomBackgroundChartContext } from './context/customBackgroundChartContext';
7
+ export const CustomBackgroundChartStructure = ({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp = 'custom-background-chart', height = '100%', onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role = 'img', tabIndex, viewBox, width = '100%', ...props }) => {
8
+ const dataTestId = useId(dataTestIdProp);
9
+ // Build viewBox string for SVG
10
+ const viewBoxString = `0 0 ${viewBox.width} ${viewBox.height}`;
11
+ // Error accumulator (existing pattern)
12
+ const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
13
+ // Validate props
14
+ useEffect(() => {
15
+ if (Object.keys(data).length === 0) {
16
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
17
+ error: new Error('Data object is empty. At least one data point is required.'),
18
+ });
19
+ }
20
+ if (!backgroundUrl || backgroundUrl.trim() === '') {
21
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
22
+ error: new Error('backgroundUrl is required and cannot be empty.'),
23
+ });
24
+ }
25
+ if (viewBox.width <= 0 || viewBox.height <= 0) {
26
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
27
+ error: new Error(`Invalid viewBox dimensions: width=${viewBox.width}, height=${viewBox.height} (both must be > 0)`),
28
+ });
29
+ }
30
+ }, [data, backgroundUrl, viewBox, errorAccumulator]);
31
+ // Context value
32
+ const contextValue = useMemo(() => ({
33
+ addError: (errorType, error) => {
34
+ errorAccumulator.addError(errorType, error);
35
+ },
36
+ data,
37
+ dataTestId,
38
+ viewBox,
39
+ }), [viewBox, data, dataTestId, errorAccumulator]);
40
+ return (_jsx(SvgContainer, { ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: className, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBoxString, width: width, onBlur: onBlur, onClick: onClick, onDoubleClick: onDoubleClick, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...props, children: _jsxs(CustomBackgroundChartContext.Provider, { value: contextValue, children: [_jsx("image", { "data-testid": `${dataTestId}-background`, height: viewBox.height, href: backgroundUrl, preserveAspectRatio: "xMidYMid meet", width: viewBox.width, x: 0, y: 0 }), _jsx("g", { "data-testid": `${dataTestId}-plots`, children: children })] }) }));
41
+ };
@@ -0,0 +1,4 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { CustomBackgroundChartPlotProps } from '../customBackgroundChart.type';
3
+ export declare const CustomBackgroundChartPlot: <T = number>({ ariaLabel, dataKey, formatAriaValue, ...props }: CustomBackgroundChartPlotProps<T>) => ReactElement | null;
4
+ //# sourceMappingURL=customBackgroundChartPlot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartPlot.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/fragments/customBackgroundChartPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAkC,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAGpF,eAAO,MAAM,yBAAyB,GAAI,CAAC,GAAG,MAAM,EAAG,mDAKpD,8BAA8B,CAAC,CAAC,CAAC,KAAG,YAAY,GAAG,IAsErD,CAAC"}
@@ -0,0 +1,49 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useContext, useEffect, useMemo } from 'react';
3
+ import { Plot } from '../../../components/plot/plot';
4
+ import { CustomBackgroundChartContext } from '../context/customBackgroundChartContext';
5
+ import { buildAriaLabel, formatValue } from '../utils/accessibility';
6
+ export const CustomBackgroundChartPlot = ({ ariaLabel, dataKey, formatAriaValue, ...props }) => {
7
+ const { addError, data, dataTestId: parentTestId, viewBox, } = useContext(CustomBackgroundChartContext);
8
+ // Access data point by dataKey (PieChart pattern)
9
+ const dataPoint = useMemo(() => data[dataKey], [data, dataKey]);
10
+ // Validate dataKey and coordinates
11
+ useEffect(() => {
12
+ if (!dataPoint) {
13
+ addError?.('CUSTOM_BACKGROUND_CHART_PLOT_ERROR', {
14
+ error: new Error(`dataKey "${dataKey}" not found in data object.`),
15
+ });
16
+ return;
17
+ }
18
+ const { x, y } = dataPoint;
19
+ if (x < 0 || x > viewBox.width || y < 0 || y > viewBox.height) {
20
+ addError?.('CUSTOM_BACKGROUND_CHART_PLOT_ERROR', {
21
+ error: new Error(`Plot "${dataKey}" coordinates (${x}, ${y}) are outside viewBox bounds (0-${viewBox.width}, 0-${viewBox.height})`),
22
+ });
23
+ }
24
+ }, [dataPoint, dataKey, addError, viewBox.width, viewBox.height]);
25
+ // Generate accessible label using template system
26
+ const accessibleLabel = useMemo(() => {
27
+ if (!dataPoint) {
28
+ return dataKey;
29
+ }
30
+ // Format the value using custom formatter or default
31
+ const formattedValue = formatAriaValue
32
+ ? formatAriaValue(dataPoint.value)
33
+ : formatValue(dataPoint.value);
34
+ // Build label from template (uses default template if ariaLabel not provided)
35
+ return buildAriaLabel({
36
+ ariaLabel,
37
+ dataKey,
38
+ formattedValue,
39
+ name: dataPoint.name,
40
+ x: dataPoint.x,
41
+ y: dataPoint.y,
42
+ });
43
+ }, [ariaLabel, dataPoint, dataKey, formatAriaValue]);
44
+ const position = useMemo(() => ({ x: dataPoint?.x ?? 0, y: dataPoint?.y ?? 0 }), [dataPoint?.x, dataPoint?.y]);
45
+ if (!dataPoint) {
46
+ return null;
47
+ }
48
+ return (_jsx(Plot, { ...props, data: { value: dataPoint.value }, dataTestId: `${parentTestId}-plot-${dataKey}`, label: accessibleLabel, position: position }));
49
+ };
@@ -0,0 +1,2 @@
1
+ export { CustomBackgroundChartPlot } from './customBackgroundChartPlot';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/fragments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
@@ -0,0 +1 @@
1
+ export { CustomBackgroundChartPlot } from './customBackgroundChartPlot';
@@ -0,0 +1,2 @@
1
+ export * from './customBackgroundChart';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
@@ -0,0 +1 @@
1
+ export * from './customBackgroundChart';
@@ -0,0 +1,19 @@
1
+ export declare const PLOT_TEMPLATE_KEYS: {
2
+ readonly DATA_KEY: "{{dataKey}}";
3
+ readonly NAME: "{{name}}";
4
+ readonly VALUE: "{{value}}";
5
+ readonly X: "{{x}}";
6
+ readonly Y: "{{y}}";
7
+ };
8
+ export declare const DEFAULT_ARIA_LABEL_TEMPLATE: string;
9
+ export interface BuildAriaLabelParams {
10
+ ariaLabel?: string;
11
+ dataKey: string;
12
+ name?: string;
13
+ formattedValue: string;
14
+ x: number;
15
+ y: number;
16
+ }
17
+ export declare const buildAriaLabel: ({ ariaLabel, dataKey, name, formattedValue, x, y, }: BuildAriaLabelParams) => string;
18
+ export declare const formatValue: <T>(value: T) => string;
19
+ //# sourceMappingURL=accessibility.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/utils/accessibility.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,2BAA2B,QAA4D,CAAC;AAQrG,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,eAAO,MAAM,cAAc,GAAI,qDAO5B,oBAAoB,KAAG,MAUzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,OAAO,CAAC,KAAG,MAQzC,CAAC"}
@@ -0,0 +1,32 @@
1
+ export const PLOT_TEMPLATE_KEYS = {
2
+ DATA_KEY: '{{dataKey}}',
3
+ NAME: '{{name}}',
4
+ VALUE: '{{value}}',
5
+ X: '{{x}}',
6
+ Y: '{{y}}',
7
+ };
8
+ export const DEFAULT_ARIA_LABEL_TEMPLATE = `${PLOT_TEMPLATE_KEYS.NAME}, ${PLOT_TEMPLATE_KEYS.VALUE}`;
9
+ const DATA_KEY_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.DATA_KEY, 'g');
10
+ const NAME_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.NAME, 'g');
11
+ const VALUE_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.VALUE, 'g');
12
+ const X_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.X, 'g');
13
+ const Y_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.Y, 'g');
14
+ export const buildAriaLabel = ({ ariaLabel, dataKey, name, formattedValue, x, y, }) => {
15
+ const template = ariaLabel ?? DEFAULT_ARIA_LABEL_TEMPLATE;
16
+ const displayName = name ?? dataKey;
17
+ return template
18
+ .replace(DATA_KEY_REGEXP, dataKey)
19
+ .replace(NAME_REGEXP, displayName)
20
+ .replace(VALUE_REGEXP, formattedValue)
21
+ .replace(X_REGEXP, String(x))
22
+ .replace(Y_REGEXP, String(y));
23
+ };
24
+ export const formatValue = (value) => {
25
+ if (typeof value === 'number') {
26
+ return value.toLocaleString();
27
+ }
28
+ if (typeof value === 'string') {
29
+ return value;
30
+ }
31
+ return JSON.stringify(value);
32
+ };
@@ -1,4 +1,5 @@
1
1
  export * from './barChart';
2
+ export * from './customBackgroundChart';
2
3
  export * from './lineChart';
3
4
  export * from './pieChart/pieChart';
4
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from './barChart';
2
+ export * from './customBackgroundChart';
2
3
  export * from './lineChart';
3
4
  export * from './pieChart/pieChart';
@@ -1 +1 @@
1
- {"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../../../src/components/plot/plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAStD,OAAO,YAAY,CAAC;AACpB,OAAO,EAAiB,KAAK,SAAS,EAAsB,MAAM,cAAc,CAAC;AA2GjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,IAAI,EAAgC,CAAC,CAAC,GAAG,MAAM,EAC1D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IACpB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}
1
+ {"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../../../src/components/plot/plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAStD,OAAO,YAAY,CAAC;AACpB,OAAO,EAAiB,KAAK,SAAS,EAAsB,MAAM,cAAc,CAAC;AAiIjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,IAAI,EAAgC,CAAC,CAAC,GAAG,MAAM,EAC1D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IACpB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}
@@ -8,6 +8,9 @@ import { Square } from './components/square/square';
8
8
  import { Triangle } from './components/triangle/triangle';
9
9
  import './plot.css';
10
10
  import { PLOT_SIZE_MAP, PlotSize, PlotType } from './plot.types';
11
+ // The centroid of a triangle is at 1/3 of the height from the base.
12
+ // When scaling, we need to compensate by (scaledSize - originalSize) / 6 to align centroids.
13
+ const TRIANGLE_CENTROID_OFFSET_DIVISOR = 6;
11
14
  // Map of components by type
12
15
  const Component = {
13
16
  [PlotType.CIRCLE]: Circle,
@@ -17,6 +20,13 @@ const Component = {
17
20
  const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity, focusConfig, hasHoverEffect, hoverConfig, id, label, onBlur, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, opacity, position = { x: 0, y: 0 }, size = PlotSize.MEDIUM, stroke, strokeWidth, tabIndex, type = PlotType.CIRCLE, ...props }, ref) => {
18
21
  const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(onMouseEnter, onMouseLeave);
19
22
  const { handleBlur, handleFocus, isFocused } = useFocus(onFocus, onBlur);
23
+ const handleKeyDown = event => {
24
+ if (onClick && (event.key === 'Enter' || event.key === ' ')) {
25
+ event.preventDefault();
26
+ onClick(event);
27
+ }
28
+ onKeyDown?.(event);
29
+ };
20
30
  // Extract properties from hoverConfig with default values
21
31
  const { fill: hoverFill = fill, opacity: hoverOpacity = 0.3, scale: hoverScale = 1.3, stroke: hoverStroke = fill, strokeWidth: hoverStrokeWidth = 0, } = hoverConfig || {};
22
32
  // Calculate size in pixels
@@ -33,7 +43,7 @@ const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity
33
43
  onBlur: handleBlur,
34
44
  onClick,
35
45
  onFocus: handleFocus,
36
- onKeyDown,
46
+ onKeyDown: handleKeyDown,
37
47
  onMouseEnter: handleMouseEnter,
38
48
  onMouseLeave: handleMouseLeave,
39
49
  opacity, // Maintains original overall opacity
@@ -41,12 +51,20 @@ const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity
41
51
  role: 'button',
42
52
  size: sizeInPixels,
43
53
  stroke, // Maintains original stroke color
44
- strokeWidth: hasHoverEffect && isHovered ? 0 : strokeWidth, // Removed isFocused dependency
54
+ strokeWidth: hasHoverEffect && isHovered && !isFocused ? 0 : strokeWidth,
45
55
  tabIndex,
46
56
  };
47
57
  // Get the correct component based on type
48
58
  const PlotShape = Component[type];
49
- return (_jsxs(_Fragment, { children: [hasHoverEffect && isHovered && !isFocused && (_jsx(PlotShape, { dataTestId: `${dataTestId}-hover`, fill: hoverFill, opacity: hoverOpacity, position: position, size: sizeInPixels * hoverScale, stroke: hoverStroke, strokeWidth: hoverStrokeWidth })), _jsx(FocusRing, { dataTestId: dataTestId, focusConfig: { ...focusConfig, variant: focusConfig?.variant ?? 'bounding-box' }, isFocused: isFocused, children: _jsx(PlotShape, { ref: ref, ...plotShapeProps }) })] }));
59
+ // Calculate hover position with vertical offset for triangles
60
+ // Triangles need compensation because their centroid is not at the geometric center
61
+ const hoverPosition = type === PlotType.TRIANGLE
62
+ ? {
63
+ x: position.x,
64
+ y: position.y - (sizeInPixels * (hoverScale - 1)) / TRIANGLE_CENTROID_OFFSET_DIVISOR,
65
+ }
66
+ : position;
67
+ return (_jsxs(_Fragment, { children: [hasHoverEffect && isHovered && !isFocused && (_jsx(PlotShape, { dataTestId: `${dataTestId}-hover`, fill: hoverFill, opacity: hoverOpacity, position: hoverPosition, size: sizeInPixels * hoverScale, stroke: hoverStroke, strokeWidth: hoverStrokeWidth })), _jsx(FocusRing, { dataTestId: dataTestId, focusConfig: { ...focusConfig, variant: focusConfig?.variant ?? 'bounding-box' }, isFocused: isFocused, children: _jsx(PlotShape, { ref: ref, ...plotShapeProps }) })] }));
50
68
  };
51
69
  /**
52
70
  * `Plot` component which renders an interactive point in a chart with hover effects and accessibility features.
@@ -4,6 +4,8 @@ export declare const ErrorType: {
4
4
  readonly BAR_CHART_SEPARATOR_ERROR: "BAR_CHART_SEPARATOR_ERROR";
5
5
  readonly BAR_CHART_X_AXIS_ERROR: "BAR_CHART_X_AXIS_ERROR";
6
6
  readonly BAR_CHART_Y_AXIS_ERROR: "BAR_CHART_Y_AXIS_ERROR";
7
+ readonly CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR: "CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR";
8
+ readonly CUSTOM_BACKGROUND_CHART_PLOT_ERROR: "CUSTOM_BACKGROUND_CHART_PLOT_ERROR";
7
9
  readonly GENERIC: "GENERIC";
8
10
  readonly LINE_CHART_CONTEXT_ERROR: "LINE_CHART_CONTEXT_ERROR";
9
11
  readonly LINE_CHART_PATH_ERROR: "LINE_CHART_PATH_ERROR";
@@ -1 +1 @@
1
- {"version":3,"file":"errors.type.d.ts","sourceRoot":"","sources":["../../../src/types/errors.type.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAoBZ,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,MAAM,OAAO,SAAS,CAAC;CAC9B;AACD,MAAM,MAAM,oBAAoB,GAAG;KAChC,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE;CACjF,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAAI,OAAO,UAAU,GAAG,UAAU,EAAE,KAAG,UAAU,EAE7E,CAAC"}
1
+ {"version":3,"file":"errors.type.d.ts","sourceRoot":"","sources":["../../../src/types/errors.type.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAuBZ,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,MAAM,OAAO,SAAS,CAAC;CAC9B;AACD,MAAM,MAAM,oBAAoB,GAAG;KAChC,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE;CACjF,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAAI,OAAO,UAAU,GAAG,UAAU,EAAE,KAAG,UAAU,EAE7E,CAAC"}
@@ -5,6 +5,9 @@ export const ErrorType = {
5
5
  BAR_CHART_SEPARATOR_ERROR: 'BAR_CHART_SEPARATOR_ERROR',
6
6
  BAR_CHART_X_AXIS_ERROR: 'BAR_CHART_X_AXIS_ERROR',
7
7
  BAR_CHART_Y_AXIS_ERROR: 'BAR_CHART_Y_AXIS_ERROR',
8
+ // Custom Background Chart Error categories
9
+ CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR: 'CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR',
10
+ CUSTOM_BACKGROUND_CHART_PLOT_ERROR: 'CUSTOM_BACKGROUND_CHART_PLOT_ERROR',
8
11
  // Generic Error for backward compatibility
9
12
  GENERIC: 'GENERIC',
10
13
  // Line Chart Errors categories
@@ -0,0 +1,3 @@
1
+ import type { CustomBackgroundChartContextType } from '../customBackgroundChart.type';
2
+ export declare const CustomBackgroundChartContext: import("react").Context<CustomBackgroundChartContextType<any>>;
3
+ //# sourceMappingURL=customBackgroundChartContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartContext.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/context/customBackgroundChartContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAGtF,eAAO,MAAM,4BAA4B,gEAExC,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { createContext } from 'react';
2
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
3
+ export const CustomBackgroundChartContext = createContext({});
@@ -0,0 +1,2 @@
1
+ export { CustomBackgroundChartContext } from './customBackgroundChartContext';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC"}
@@ -0,0 +1 @@
1
+ export { CustomBackgroundChartContext } from './customBackgroundChartContext';
@@ -0,0 +1,6 @@
1
+ declare const CustomBackgroundChart: (<T = number>({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp, height, onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role, tabIndex, viewBox, width, ...props }: import("./customBackgroundChart.type").CustomBackgroundChartProps<T>) => import("react").ReactElement) & {
2
+ Plot: <T = number>({ ariaLabel, dataKey, formatAriaValue, ...props }: import("./customBackgroundChart.type").CustomBackgroundChartPlotProps<T>) => import("react").ReactElement | null;
3
+ };
4
+ export { CustomBackgroundChart };
5
+ export * from './customBackgroundChart.type';
6
+ //# sourceMappingURL=customBackgroundChart.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChart.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChart.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,qBAAqB;;CAEzB,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,cAAc,8BAA8B,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { CustomBackgroundChartStructure } from './customBackgroundChartStructure';
2
+ import { CustomBackgroundChartPlot } from './fragments/customBackgroundChartPlot';
3
+ const CustomBackgroundChart = Object.assign(CustomBackgroundChartStructure, {
4
+ Plot: CustomBackgroundChartPlot,
5
+ });
6
+ export { CustomBackgroundChart };
7
+ export * from './customBackgroundChart.type';
@@ -0,0 +1,50 @@
1
+ import type { PlotProps } from '../../components/plot/plot.types';
2
+ import type { ChartError, ChartErrorCollection, ErrorType } from '../../types/errors.type';
3
+ export interface CustomBackgroundDataPoint<T = number> {
4
+ x: number;
5
+ y: number;
6
+ value: T;
7
+ name?: string;
8
+ }
9
+ export type CustomBackgroundData<T = number> = Record<string, CustomBackgroundDataPoint<T>>;
10
+ export interface ViewBoxDimensions {
11
+ width: number;
12
+ height: number;
13
+ }
14
+ export interface CustomBackgroundChartProps<T = number> {
15
+ data: CustomBackgroundData<T>;
16
+ backgroundUrl: string;
17
+ viewBox: ViewBoxDimensions;
18
+ width?: string | number;
19
+ height?: string | number;
20
+ children?: React.ReactNode;
21
+ ariaLabel?: string;
22
+ ariaHidden?: boolean;
23
+ role?: string;
24
+ tabIndex?: number;
25
+ caption?: string;
26
+ className?: string;
27
+ dataTestId?: string;
28
+ onErrors?: (errors: ChartErrorCollection) => void;
29
+ onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
30
+ onDoubleClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
31
+ onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
32
+ onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
33
+ onFocus?: (event: React.FocusEvent<SVGElement>) => void;
34
+ onBlur?: (event: React.FocusEvent<SVGElement>) => void;
35
+ onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
36
+ onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
37
+ }
38
+ export interface CustomBackgroundChartPlotProps<T = number> extends Omit<PlotProps<T>, 'position' | 'data' | 'label'> {
39
+ dataKey: string;
40
+ /** Supports placeholders: {{dataKey}}, {{name}}, {{value}}, {{x}}, {{y}} */
41
+ ariaLabel?: string;
42
+ formatAriaValue?: (value: T) => string;
43
+ }
44
+ export interface CustomBackgroundChartContextType<T = number> {
45
+ data: CustomBackgroundData<T>;
46
+ viewBox: ViewBoxDimensions;
47
+ dataTestId: string;
48
+ addError?: (errorType: keyof typeof ErrorType, error: Omit<ChartError, 'type'>) => void;
49
+ }
50
+ //# sourceMappingURL=customBackgroundChart.type.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChart.type.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChart.type.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { CustomBackgroundChartProps } from './customBackgroundChart.type';
3
+ export declare const CustomBackgroundChartStructure: <T = number>({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp, height, onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role, tabIndex, viewBox, width, ...props }: CustomBackgroundChartProps<T>) => ReactElement;
4
+ //# sourceMappingURL=customBackgroundChartStructure.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/customBackgroundChart/customBackgroundChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,OAAO,CAAC;AAQ9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,8BAA8B,GAAI,CAAC,GAAG,MAAM,EAAG,+PAwBzD,0BAA0B,CAAC,CAAC,CAAC,KAAG,YAiFlC,CAAC"}
@@ -0,0 +1,41 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useMemo } from 'react';
3
+ import { SvgContainer } from '../../components/svgContainer/svgContainer';
4
+ import { useId } from '../../hooks/useId/useId';
5
+ import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
6
+ import { CustomBackgroundChartContext } from './context/customBackgroundChartContext';
7
+ export const CustomBackgroundChartStructure = ({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp = 'custom-background-chart', height = '100%', onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role = 'img', tabIndex, viewBox, width = '100%', ...props }) => {
8
+ const dataTestId = useId(dataTestIdProp);
9
+ // Build viewBox string for SVG
10
+ const viewBoxString = `0 0 ${viewBox.width} ${viewBox.height}`;
11
+ // Error accumulator (existing pattern)
12
+ const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
13
+ // Validate props
14
+ useEffect(() => {
15
+ if (Object.keys(data).length === 0) {
16
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
17
+ error: new Error('Data object is empty. At least one data point is required.'),
18
+ });
19
+ }
20
+ if (!backgroundUrl || backgroundUrl.trim() === '') {
21
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
22
+ error: new Error('backgroundUrl is required and cannot be empty.'),
23
+ });
24
+ }
25
+ if (viewBox.width <= 0 || viewBox.height <= 0) {
26
+ errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
27
+ error: new Error(`Invalid viewBox dimensions: width=${viewBox.width}, height=${viewBox.height} (both must be > 0)`),
28
+ });
29
+ }
30
+ }, [data, backgroundUrl, viewBox, errorAccumulator]);
31
+ // Context value
32
+ const contextValue = useMemo(() => ({
33
+ addError: (errorType, error) => {
34
+ errorAccumulator.addError(errorType, error);
35
+ },
36
+ data,
37
+ dataTestId,
38
+ viewBox,
39
+ }), [viewBox, data, dataTestId, errorAccumulator]);
40
+ return (_jsx(SvgContainer, { ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: className, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBoxString, width: width, onBlur: onBlur, onClick: onClick, onDoubleClick: onDoubleClick, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...props, children: _jsxs(CustomBackgroundChartContext.Provider, { value: contextValue, children: [_jsx("image", { "data-testid": `${dataTestId}-background`, height: viewBox.height, href: backgroundUrl, preserveAspectRatio: "xMidYMid meet", width: viewBox.width, x: 0, y: 0 }), _jsx("g", { "data-testid": `${dataTestId}-plots`, children: children })] }) }));
41
+ };
@@ -0,0 +1,4 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { CustomBackgroundChartPlotProps } from '../customBackgroundChart.type';
3
+ export declare const CustomBackgroundChartPlot: <T = number>({ ariaLabel, dataKey, formatAriaValue, ...props }: CustomBackgroundChartPlotProps<T>) => ReactElement | null;
4
+ //# sourceMappingURL=customBackgroundChartPlot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"customBackgroundChartPlot.d.ts","sourceRoot":"","sources":["../../../../../src/charts/customBackgroundChart/fragments/customBackgroundChartPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAkC,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAGpF,eAAO,MAAM,yBAAyB,GAAI,CAAC,GAAG,MAAM,EAAG,mDAKpD,8BAA8B,CAAC,CAAC,CAAC,KAAG,YAAY,GAAG,IAsErD,CAAC"}