vccs 0.0.1 → 0.2.0

package/dist/state/graphicalItemsSlice.d.ts

@@ -0,0 +1,108 @@
+import { ChartData } from './chartDataSlice';
+import { AxisId } from './cartesianAxisSlice';
+import { MaybeStackedGraphicalItem } from './selectors/barSelectors';
+import { ErrorBarDirection } from '../types/bar';
+import { DataKey } from '../types';
+import { NormalizedStackId } from '../shape';
+import { StackId } from '../types/tick';
+/**
+ * ErrorBars have lot more settings but all the others are scoped to the component itself.
+ * Only some of them required to be reported to the global store because XAxis and YAxis need to know
+ * if the error bar is contributing to extending the axis domain.
+ */
+export type ErrorBarsSettings = {
+    /**
+     * The direction is only used in Scatter chart, and decided based on ChartLayout in other charts.
+     */
+    direction: ErrorBarDirection;
+    /**
+     * The dataKey decides which property from the data will each individual ErrorBar use.
+     * If it so happens that the ErrorBar data are bigger than the axis domain,
+     * the error bar data will stretch the axis domain.
+     */
+    dataKey: DataKey<any>;
+};
+export type CartesianGraphicalItemType = 'area' | 'bar' | 'line' | 'scatter';
+export type PolarGraphicalItemType = 'pie' | 'radar' | 'radialBar' | 'funnel';
+export interface GraphicalItemSettings extends MaybeStackedGraphicalItem {
+    data: ChartData;
+    dataKey: DataKey<any> | undefined;
+    /**
+     * Why not just stop pushing the graphical items to state when they are hidden?
+     * Well some components decide to continue showing them anyway.
+     * Legend for example will keep showing a record for hidden graphical items.
+     * Stacks for example will ignore them.
+     */
+    hide: boolean;
+}
+export type CartesianGraphicalItemSettings = GraphicalItemSettings & {
+    type: CartesianGraphicalItemType;
+    /**
+     * Graphical items that are inside Brush panorama should not interact with the main area graphical items
+     * and vice versa.
+     */
+    isPanorama: boolean;
+    /**
+     * Each of the graphical items explicitly says which axis it uses;
+     * this property is optional for users but every graphical item must have a default,
+     * and it is required here.
+     */
+    xAxisId: AxisId;
+    yAxisId: AxisId;
+    zAxisId: AxisId;
+    /**
+     * ErrorBars are only rendered if they are explicitly set in the React tree, otherwise this will be an empty array.
+     * One graphical item can have multiple error bars. This probably only makes sense in Scatter.
+     */
+    errorBars: ReadonlyArray<ErrorBarsSettings> | undefined;
+    stackId: NormalizedStackId | undefined;
+    /**
+     * This property is only used in Bar and RadialBar items
+     */
+    barSize: number | string | undefined;
+};
+export type PolarGraphicalItemSettings = GraphicalItemSettings & {
+    type: PolarGraphicalItemType;
+    angleAxisId: AxisId;
+    radiusAxisId: AxisId;
+    /**
+     * Only used by RadialBar items
+     */
+    barSize?: number | string;
+    stackId?: StackId;
+    minPointSize?: number;
+    maxBarSize?: number;
+};
+type ReplacePayload<T> = {
+    prev: T;
+    next: T;
+};
+export type GraphicalItemsState = {
+    /**
+     * @deprecated - we can now read graphicalitems.type property instead of maintaining separate reducer. TODO replace
+     * Axis scale selector behaves differently if one of the child elements is a bar
+     * vs if it's not;
+     * So we need to track the number of bars present in the chart
+     * and then report if there is at least one.
+     */
+    countOfBars: number;
+    /**
+     * This is an array of all cartesian graphical items and their settings.
+     * Graphical item is a visual representation of data on the chart.
+     * Some examples are: Line, Bar.
+     *
+     * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+     */
+    cartesianItems: ReadonlyArray<CartesianGraphicalItemSettings>;
+    /**
+     * This is an array of all polar graphical items and their settings.
+     * Graphical item is a visual representation of data on the chart.
+     * Some examples are: Pie, Radar, RadialBar
+     *
+     * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+     */
+    polarItems: ReadonlyArray<PolarGraphicalItemSettings>;
+};
+export declare const addBar: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"graphicalItems/addBar">, removeBar: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"graphicalItems/removeBar">, addCartesianGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<CartesianGraphicalItemSettings, "graphicalItems/addCartesianGraphicalItem">, removeCartesianGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<CartesianGraphicalItemSettings, "graphicalItems/removeCartesianGraphicalItem">, addPolarGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<PolarGraphicalItemSettings, "graphicalItems/addPolarGraphicalItem">, replaceCartesianGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReplacePayload<CartesianGraphicalItemSettings>, "graphicalItems/replaceCartesianGraphicalItem">, removePolarGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<PolarGraphicalItemSettings, "graphicalItems/removePolarGraphicalItem">, replacePolarGraphicalItem: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReplacePayload<PolarGraphicalItemSettings>, "graphicalItems/replacePolarGraphicalItem">;
+export declare const graphicalItemsReducer: import('@reduxjs/toolkit').Reducer<GraphicalItemsState>;
+export {};

package/dist/state/hooks.d.ts

@@ -0,0 +1,54 @@
+import { AppDispatch } from './store';
+export declare const useAppDispatch: import('@reduxjs/vue-redux').UseDispatch<AppDispatch>;
+export declare const useAppSelector: import('@reduxjs/vue-redux').UseSelector<{
+    brush: import('./brushSlice').BrushSettings;
+    cartesianAxis: {
+        xAxis: Record<import('./cartesianAxisSlice').AxisId, import('./cartesianAxisSlice').XAxisSettings>;
+        yAxis: Record<import('./cartesianAxisSlice').AxisId, import('./cartesianAxisSlice').YAxisSettings>;
+        zAxis: Record<import('./cartesianAxisSlice').AxisId, import('./cartesianAxisSlice').ZAxisSettings>;
+    };
+    chartData: import('./chartDataSlice').ChartDataState;
+    graphicalItems: import('./graphicalItemsSlice').GraphicalItemsState;
+    layout: {
+        layoutType: import('../types').LayoutType;
+        width: number;
+        height: number;
+        margin: import('../types').Margin;
+        scale: number;
+    };
+    legend: {
+        settings: import('./legendSlice').LegendSettings;
+        size: import('../types').Size;
+        payload: ReadonlyArray<ReadonlyArray<import('../components/DefaultLegendContent').LegendPayload>>;
+    };
+    options: import('./optionsSlice').ChartOptions;
+    polarAxis: {
+        radiusAxis: Record<import('./cartesianAxisSlice').AxisId, import('./polarAxisSlice').RadiusAxisSettings>;
+        angleAxis: Record<import('./cartesianAxisSlice').AxisId, import('./polarAxisSlice').AngleAxisSettings>;
+    };
+    polarOptions: import('./polarOptionsSlice').PolarChartOptions;
+    referenceElements: {
+        dots: ReadonlyArray<import('./referenceElementsSlice').ReferenceDotSettings>;
+        areas: ReadonlyArray<import('./referenceElementsSlice').ReferenceAreaSettings>;
+        lines: ReadonlyArray<import('./referenceElementsSlice').ReferenceLineSettings>;
+    };
+    rootProps: import('./rootPropsSlice').UpdatableChartOptions;
+    tooltip: import('./tooltipSlice').TooltipState;
+}>;
+/**
+ * Returns the currently active data points being displayed in the Tooltip.
+ * Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
+ *
+ * This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
+ * If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
+ *
+ * Data point is whatever you pass as an input to the chart using the `data={}` prop.
+ *
+ * This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
+ * and tooltip with `shared={true}` will display all items at the same time.
+ *
+ * Returns undefined when used outside a chart context.
+ *
+ * @returns Data points that are currently visible in a Tooltip
+ */
+export declare function useActiveTooltipDataPoints(): Readonly<import('vue').ShallowRef<import('./tooltipSlice').TooltipPayloadEntry[]>>;

package/dist/state/keyboardEventsMiddleware.d.ts

@@ -0,0 +1,3 @@
+export declare const keyDownAction: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<string, string>;
+export declare const focusAction: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"focus">;
+export declare const keyboardEventsMiddleware: import('@reduxjs/toolkit').ListenerMiddlewareInstance<unknown, import('@reduxjs/toolkit').ThunkDispatch<unknown, unknown, import('@reduxjs/toolkit').UnknownAction>, unknown>;

package/dist/state/layoutSlice.d.ts

@@ -0,0 +1,15 @@
+import { LayoutType, Margin, Size } from '../types';
+type ChartLayoutState = {
+    layoutType: LayoutType;
+    width: number;
+    height: number;
+    margin: Margin;
+    /**
+     * How much is the chart zoomed in.
+     * Used for scaling the mouse coordinates to the chart coordinates.
+     */
+    scale: number;
+};
+export declare const setMargin: import('@reduxjs/toolkit').ActionCreatorWithNonInferrablePayload<"chartLayout/setMargin">, setLayout: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<LayoutType, "chartLayout/setLayout">, setChartSize: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<Size, "chartLayout/setChartSize">, setScale: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number, "chartLayout/setScale">;
+export declare const chartLayoutReducer: import('@reduxjs/toolkit').Reducer<ChartLayoutState>;
+export {};

package/dist/state/legendSlice.d.ts

@@ -0,0 +1,26 @@
+import { HorizontalAlignmentType, LegendPayload, VerticalAlignmentType } from '../components/DefaultLegendContent';
+import { LayoutType, Size } from '../types';
+export type LegendSettings = {
+    layout: LayoutType;
+    align: HorizontalAlignmentType;
+    verticalAlign: VerticalAlignmentType;
+};
+/**
+ * The properties inside this state update independently of each other and quite often.
+ * When selecting, never select the whole state because you are going to get
+ * unnecessary re-renders. Select only the properties you need.
+ *
+ * This is why this state type is not exported - don't use it directly.
+ */
+type LegendState = {
+    settings: LegendSettings;
+    size: Size;
+    /**
+     * This is a 2D array of LegendPayloads. The first dimension is for each graphical item.
+     * Some items may have multiple legend items, so the second dimension is for each legend item.
+     */
+    payload: ReadonlyArray<ReadonlyArray<LegendPayload>>;
+};
+export declare const setLegendSize: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<Size, "legend/setLegendSize">, setLegendSettings: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<LegendSettings, "legend/setLegendSettings">, addLegendPayload: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<readonly LegendPayload[], "legend/addLegendPayload">, removeLegendPayload: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<readonly LegendPayload[], "legend/removeLegendPayload">;
+export declare const legendReducer: import('@reduxjs/toolkit').Reducer<LegendState>;
+export {};

package/dist/state/mouseEventsMiddleware.d.ts

@@ -0,0 +1,5 @@
+import { ChartPointer } from '../types';
+export declare const mouseClickAction: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ChartPointer, string>;
+export declare const mouseClickMiddleware: import('@reduxjs/toolkit').ListenerMiddlewareInstance<unknown, import('@reduxjs/toolkit').ThunkDispatch<unknown, unknown, import('@reduxjs/toolkit').UnknownAction>, unknown>;
+export declare const mouseMoveAction: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ChartPointer, string>;
+export declare const mouseMoveMiddleware: import('@reduxjs/toolkit').ListenerMiddlewareInstance<unknown, import('@reduxjs/toolkit').ThunkDispatch<unknown, unknown, import('@reduxjs/toolkit').UnknownAction>, unknown>;

package/dist/state/optionsSlice.d.ts

@@ -0,0 +1,27 @@
+import { TooltipIndex, TooltipPayloadSearcher } from './tooltipSlice';
+import { TooltipEventType } from '../types';
+/**
+ * These chart options are decided internally, by Recharts,
+ * and will not change during the lifetime of the chart.
+ *
+ * Changing these options can be done by swapping the root element
+ * which will make a brand-new Redux store.
+ *
+ * If you want to store options that can be changed by the user,
+ * use UpdatableChartOptions in rootPropsSlice.ts.
+ */
+export type ChartOptions = {
+    chartName: string;
+    defaultTooltipEventType: TooltipEventType;
+    validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>;
+    tooltipPayloadSearcher: TooltipPayloadSearcher | undefined;
+    /**
+     * We use this to identify which chart is sending events when synchronising.
+     * Without it, we can't tell the difference between an action that arrived from another chart
+     * and an action that was dispatched by the chart itself.
+     */
+    eventEmitter: symbol | undefined;
+};
+export declare function arrayTooltipSearcher<T>(data: ReadonlyArray<T>, strIndex: TooltipIndex): T | undefined;
+export declare const optionsReducer: import('@reduxjs/toolkit').Reducer<ChartOptions>;
+export declare const createEventEmitter: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"options/createEventEmitter">;

package/dist/state/polarAxisSlice.d.ts

@@ -0,0 +1,10 @@
+import { AxisId, BaseCartesianAxis, TicksSettings } from './cartesianAxisSlice';
+export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings;
+export type AngleAxisSettings = BaseCartesianAxis & TicksSettings;
+type PolarAxisState = {
+    radiusAxis: Record<AxisId, RadiusAxisSettings>;
+    angleAxis: Record<AxisId, AngleAxisSettings>;
+};
+export declare const addRadiusAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<RadiusAxisSettings, "polarAxis/addRadiusAxis">, removeRadiusAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<RadiusAxisSettings, "polarAxis/removeRadiusAxis">, addAngleAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<AngleAxisSettings, "polarAxis/addAngleAxis">, removeAngleAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<AngleAxisSettings, "polarAxis/removeAngleAxis">;
+export declare const polarAxisReducer: import('@reduxjs/toolkit').Reducer<PolarAxisState>;
+export {};

package/dist/state/polarOptionsSlice.d.ts

@@ -0,0 +1,10 @@
+export type PolarChartOptions = {
+    cx: number | string;
+    cy: number | string;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number | string;
+    outerRadius: number | string;
+};
+export declare const updatePolarOptions: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<PolarChartOptions, "polarOptions/updatePolarOptions">;
+export declare const polarOptionsReducer: import('@reduxjs/toolkit').Reducer<PolarChartOptions>;

package/dist/state/reduxDevtoolsJsonStringifyReplacer.d.ts

@@ -0,0 +1 @@
+export declare function reduxDevtoolsJsonStringifyReplacer(_key: string, value: unknown): unknown;

package/dist/state/referenceElementsSlice.d.ts

@@ -0,0 +1,40 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import { WritableDraft } from 'immer';
+import { AxisId } from './cartesianAxisSlice';
+import { IfOverflow } from '../types';
+export type ReferenceElementSettings = {
+    yAxisId: AxisId;
+    xAxisId: AxisId;
+    ifOverflow: IfOverflow;
+};
+export type ReferenceDotSettings = ReferenceElementSettings & {
+    x: unknown;
+    y: unknown;
+    r: number;
+};
+export type ReferenceAreaSettings = ReferenceElementSettings & {
+    x1: unknown;
+    x2: unknown;
+    y1: unknown;
+    y2: unknown;
+};
+export type ReferenceLineSettings = ReferenceElementSettings & {
+    x: unknown;
+    y: unknown;
+};
+type ReferenceElementState = {
+    dots: ReadonlyArray<ReferenceDotSettings>;
+    areas: ReadonlyArray<ReferenceAreaSettings>;
+    lines: ReadonlyArray<ReferenceLineSettings>;
+};
+export declare const referenceElementsSlice: import('@reduxjs/toolkit').Slice<ReferenceElementState, {
+    addDot: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceDotSettings>) => void;
+    removeDot: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceDotSettings>) => void;
+    addArea: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceAreaSettings>) => void;
+    removeArea: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceAreaSettings>) => void;
+    addLine: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceLineSettings>) => void;
+    removeLine: (state: WritableDraft<ReferenceElementState>, action: PayloadAction<ReferenceLineSettings>) => void;
+}, "referenceElements", "referenceElements", import('@reduxjs/toolkit').SliceSelectors<ReferenceElementState>>;
+export declare const addDot: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceDotSettings, "referenceElements/addDot">, removeDot: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceDotSettings, "referenceElements/removeDot">, addArea: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceAreaSettings, "referenceElements/addArea">, removeArea: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceAreaSettings, "referenceElements/removeArea">, addLine: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceLineSettings, "referenceElements/addLine">, removeLine: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ReferenceLineSettings, "referenceElements/removeLine">;
+export declare const referenceElementsReducer: import('@reduxjs/toolkit').Reducer<ReferenceElementState>;
+export {};

package/dist/state/rootPropsSlice.d.ts

@@ -0,0 +1,26 @@
+import { StackOffsetType, SyncMethod } from '../types';
+/**
+ * These are chart options that users can choose - which means they can also
+ * choose to change them which should trigger a re-render.
+ */
+export type UpdatableChartOptions = {
+    accessibilityLayer: boolean;
+    barCategoryGap: number | string;
+    barGap: number | string;
+    barSize: string | number | undefined;
+    /**
+     * Useful for debugging which chart is which when synchronising.
+     * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
+     */
+    class: string | undefined;
+    maxBarSize: number | undefined;
+    stackOffset: StackOffsetType;
+    /**
+     * Charts that share the same syncId will have their Tooltip and Brush synchronised.
+     */
+    syncId: number | string | undefined;
+    syncMethod: SyncMethod;
+};
+export declare const initialState: UpdatableChartOptions;
+export declare const rootPropsReducer: import('@reduxjs/toolkit').Reducer<UpdatableChartOptions>;
+export declare const updateOptions: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<UpdatableChartOptions, "rootProps/updateOptions">;

package/dist/state/selectors/areaSelectors.d.ts

@@ -0,0 +1,24 @@
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { ChartData } from '../chartDataSlice';
+import { Point as CurvePoint } from '../../shape';
+import { BaseValue } from '../../types/area';
+import { Coordinate, DataKey } from '../../types';
+import { StackId } from '../../types/tick';
+export interface AreaPointItem extends CurvePoint {
+    value?: number | number[];
+    payload?: any;
+}
+export type AreaSettings = {
+    connectNulls: boolean;
+    baseValue: BaseValue | undefined;
+    dataKey: DataKey<any>;
+    stackId: StackId | undefined;
+    data: ChartData | undefined;
+};
+export type ComputedArea = {
+    points: ReadonlyArray<AreaPointItem>;
+    baseLine: number | Coordinate[];
+    isRange: boolean;
+};
+export declare const selectArea: (state: RechartsRootState, xAxisId: AxisId, yAxisId: AxisId, isPanorama: boolean, areaSettings: AreaSettings) => ComputedArea | undefined;