@galaxy-io/dls 1.4.13 → 1.4.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts/{DashboardProvider.d.ts → ChartGroupProvider.d.ts} +8 -8
- package/dist/charts/{DashboardProvider.js → ChartGroupProvider.js} +5 -5
- package/dist/charts/useChartInteraction.d.ts +4 -4
- package/dist/charts/useChartInteraction.js +2 -2
- package/dist/theme/variants/light.js +3 -3
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { type PropsWithChildren } from "react";
|
|
|
3
3
|
* The category one chart's pointer is currently over, broadcast to its
|
|
4
4
|
* siblings.
|
|
5
5
|
*/
|
|
6
|
-
export interface
|
|
6
|
+
export interface ChartGroupSyncEntry {
|
|
7
7
|
/** `useId` of the chart whose pointer produced this entry. */
|
|
8
8
|
sourceId: string;
|
|
9
9
|
/**
|
|
@@ -12,15 +12,15 @@ export interface DashboardSyncEntry {
|
|
|
12
12
|
*/
|
|
13
13
|
categoryKey: string;
|
|
14
14
|
}
|
|
15
|
-
export interface
|
|
16
|
-
activeEntry:
|
|
17
|
-
setActive: (entry:
|
|
15
|
+
export interface ChartGroupContextValue {
|
|
16
|
+
activeEntry: ChartGroupSyncEntry | null;
|
|
17
|
+
setActive: (entry: ChartGroupSyncEntry) => void;
|
|
18
18
|
/** Clears only if the current entry belongs to `sourceId`. */
|
|
19
19
|
clearActive: (sourceId: string) => void;
|
|
20
20
|
/** Followers open their own tooltip at the synced category. */
|
|
21
21
|
sharedTooltip: boolean;
|
|
22
22
|
}
|
|
23
|
-
export declare const
|
|
23
|
+
export declare const ChartGroupContext: import("react").Context<ChartGroupContextValue | null>;
|
|
24
24
|
/**
|
|
25
25
|
* Shares the hovered category between the cartesian charts inside it.
|
|
26
26
|
*
|
|
@@ -49,9 +49,9 @@ export declare const DashboardContext: import("react").Context<DashboardContextV
|
|
|
49
49
|
* across a chart re-renders the group a handful of times. No subscription or
|
|
50
50
|
* selector machinery is warranted.
|
|
51
51
|
*/
|
|
52
|
-
export interface
|
|
52
|
+
export interface ChartGroupProviderProps {
|
|
53
53
|
/** Every synced chart opens its own tooltip at the shared category. @default false */
|
|
54
54
|
sharedTooltip?: boolean;
|
|
55
55
|
}
|
|
56
|
-
export declare const
|
|
57
|
-
export default
|
|
56
|
+
export declare const ChartGroupProvider: ({ sharedTooltip, children, }: PropsWithChildren<ChartGroupProviderProps>) => import("react").JSX.Element;
|
|
57
|
+
export default ChartGroupProvider;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { createContext, useCallback, useMemo, useState } from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
//#region src/charts/
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
//#region src/charts/ChartGroupProvider.tsx
|
|
4
|
+
var ChartGroupContext = createContext(null);
|
|
5
|
+
var ChartGroupProvider = ({ sharedTooltip = false, children }) => {
|
|
6
6
|
const [activeEntry, setActiveEntry] = useState(null);
|
|
7
7
|
const setActive = useCallback((entry) => {
|
|
8
8
|
setActiveEntry((prev) => prev !== null && prev.sourceId === entry.sourceId && prev.categoryKey === entry.categoryKey ? prev : entry);
|
|
@@ -21,10 +21,10 @@ var DashboardProvider = ({ sharedTooltip = false, children }) => {
|
|
|
21
21
|
clearActive,
|
|
22
22
|
sharedTooltip
|
|
23
23
|
]);
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
24
|
+
return /* @__PURE__ */ jsx(ChartGroupContext.Provider, {
|
|
25
25
|
value: contextValue,
|
|
26
26
|
children
|
|
27
27
|
});
|
|
28
28
|
};
|
|
29
29
|
//#endregion
|
|
30
|
-
export {
|
|
30
|
+
export { ChartGroupContext, ChartGroupProvider, ChartGroupProvider as default };
|
|
@@ -9,7 +9,7 @@ import { ChartMarkState } from "./types";
|
|
|
9
9
|
* - **Series** — a legend key. Hovering (or focusing) a legend entry isolates
|
|
10
10
|
* that series.
|
|
11
11
|
*
|
|
12
|
-
* Plus one read-only source: inside a `
|
|
12
|
+
* Plus one read-only source: inside a `ChartGroupProvider`, a chart that
|
|
13
13
|
* supplies {@link UseChartInteractionOptions.categoryKeys} follows the category
|
|
14
14
|
* hovered in a sibling chart, matched by raw label. Following emphasizes; it
|
|
15
15
|
* opens the tooltip only when the provider opts in via `sharedTooltip`, which
|
|
@@ -29,7 +29,7 @@ interface UseChartInteractionOptions {
|
|
|
29
29
|
seriesKeys?: string[];
|
|
30
30
|
/**
|
|
31
31
|
* Raw category labels, index-aligned with {@link categoryCount}. Supplying
|
|
32
|
-
* them opts the chart into `
|
|
32
|
+
* them opts the chart into `ChartGroupProvider` crosshair sync; omit (as
|
|
33
33
|
* PieChart does) to stay out. Raw labels, never `labelFormatter` output —
|
|
34
34
|
* two charts formatting the same label differently must still match.
|
|
35
35
|
*/
|
|
@@ -65,13 +65,13 @@ interface MarkStateArgs {
|
|
|
65
65
|
export interface ChartInteraction {
|
|
66
66
|
/**
|
|
67
67
|
* The active category — this chart's own hover, or failing that the category
|
|
68
|
-
* a `
|
|
68
|
+
* a `ChartGroupProvider` sibling is hovering, resolved to a local index.
|
|
69
69
|
*/
|
|
70
70
|
activeIndex: number | null;
|
|
71
71
|
/**
|
|
72
72
|
* True when this chart should present its tooltip for {@link activeIndex}:
|
|
73
73
|
* its own pointer hover always, a synced sibling's only when the
|
|
74
|
-
* `
|
|
74
|
+
* `ChartGroupProvider` opts in via `sharedTooltip`.
|
|
75
75
|
*/
|
|
76
76
|
showTooltip: boolean;
|
|
77
77
|
hoveredSeriesKey: string | null;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ChartMarkState } from "./types.js";
|
|
2
|
-
import {
|
|
2
|
+
import { ChartGroupContext } from "./ChartGroupProvider.js";
|
|
3
3
|
import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
|
|
4
4
|
//#region src/charts/useChartInteraction.ts
|
|
5
5
|
function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
|
|
6
6
|
const [hoveredIndex, setHoveredIndex] = useState(null);
|
|
7
7
|
const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
|
|
8
|
-
const sync = useContext(
|
|
8
|
+
const sync = useContext(ChartGroupContext);
|
|
9
9
|
const syncId = useId();
|
|
10
10
|
const canSync = sync !== null && categoryKeys !== void 0;
|
|
11
11
|
const setActive = sync?.setActive;
|
|
@@ -11,9 +11,9 @@ var GALAXY_LIGHT_COLOR = {
|
|
|
11
11
|
warning: "#ca8404",
|
|
12
12
|
error: "#e53f5a",
|
|
13
13
|
pink: "#ff4595",
|
|
14
|
-
orange: "#
|
|
15
|
-
yellow: "#
|
|
16
|
-
lime: "#
|
|
14
|
+
orange: "#ed811d",
|
|
15
|
+
yellow: "#beae17",
|
|
16
|
+
lime: "#83c01b",
|
|
17
17
|
green: "#4cb782",
|
|
18
18
|
blue: "#4885ff",
|
|
19
19
|
teal: "#20b2a5",
|