vue-chrts 0.2.5 → 1.0.0-test.2

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 (29) hide show
  1. package/dist/components/AreaChart/AreaChart.js +103 -73
  2. package/dist/components/AreaChart/types.d.ts +26 -9
  3. package/dist/components/BarChart/BarChart.js +91 -85
  4. package/dist/components/BarChart/stackedGroupedUtils.d.ts +2 -3
  5. package/dist/components/BarChart/types.d.ts +13 -1
  6. package/dist/components/BubbleChart/BubbleChart.js +78 -61
  7. package/dist/components/BubbleChart/BubbleChart.vue.d.ts +1 -1
  8. package/dist/components/BubbleChart/types.d.ts +15 -17
  9. package/dist/components/DonutChart/DonutChart.js +87 -69
  10. package/dist/components/DonutChart/types.d.ts +16 -8
  11. package/dist/components/GanttChart/GanttChart.js +140 -0
  12. package/dist/components/GanttChart/GanttChart.vue.d.ts +33 -0
  13. package/dist/components/GanttChart/GanttChart2.js +4 -0
  14. package/dist/components/GanttChart/types.d.ts +112 -0
  15. package/dist/components/LineChart/LineChart.js +27 -129
  16. package/dist/components/LineChart/LineChart.vue.d.ts +9 -8
  17. package/dist/components/LineChart/types.d.ts +2 -140
  18. package/dist/components/Tooltip.js +9 -9
  19. package/dist/index.d.ts +2 -2
  20. package/dist/index.js +13 -13
  21. package/dist/types.d.ts +24 -14
  22. package/dist/types.js +4 -4
  23. package/dist/utils.d.ts +1 -0
  24. package/dist/utils.js +27 -26
  25. package/package.json +1 -1
  26. package/dist/components/AreaStackedChart/AreaStackedChart.js +0 -77
  27. package/dist/components/AreaStackedChart/AreaStackedChart.vue.d.ts +0 -14
  28. package/dist/components/AreaStackedChart/AreaStackedChart2.js +0 -4
  29. package/dist/components/AreaStackedChart/types.d.ts +0 -86
@@ -0,0 +1,140 @@
1
+ import { defineComponent as V, useSlots as B, useTemplateRef as w, ref as A, computed as s, createElementBlock as g, openBlock as m, normalizeStyle as c, createVNode as o, createCommentVNode as f, createElementVNode as H, unref as i, withCtx as P, mergeProps as F, renderSlot as h } from "vue";
2
+ import { Timeline as y } from "@unovis/ts";
3
+ import { dateFormatter as S, getFirstPropertyValue as N } from "../../utils.js";
4
+ import j from "../Tooltip.js";
5
+ import { VisXYContainer as O, VisTimeline as $, VisTooltip as D, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
6
+ import { LegendPosition as E } from "../../types.js";
7
+ const I = /* @__PURE__ */ V({
8
+ __name: "GanttChart",
9
+ props: {
10
+ data: {},
11
+ labelWidth: { default: 220 },
12
+ height: {},
13
+ title: { default: "" },
14
+ categories: {},
15
+ x: {},
16
+ length: {},
17
+ type: {},
18
+ getTooltipText: {},
19
+ xNumTicks: {},
20
+ showLabels: { type: Boolean, default: !0 },
21
+ hideTooltip: { type: Boolean, default: !1 },
22
+ crosshairConfig: {},
23
+ lineWidth: { default: 12 },
24
+ rowHeight: { default: 24 },
25
+ legendPosition: { default: E.TopRight },
26
+ legendStyle: {},
27
+ hideLegend: { type: Boolean },
28
+ xTickLine: { type: Boolean },
29
+ xTickFormat: {},
30
+ xMinMaxTicksOnly: { type: Boolean },
31
+ xTickValues: {},
32
+ xGridLine: { type: Boolean },
33
+ xDomainLine: { type: Boolean },
34
+ xAxisConfig: {},
35
+ yAxisConfig: {}
36
+ },
37
+ emits: ["click", "scroll", "labelHover"],
38
+ setup(T, { emit: k }) {
39
+ const l = T, r = k, v = B(), d = w("slotWrapper"), n = A(), x = s(() => l.legendPosition.startsWith("top")), b = s(() => l.legendPosition.includes("left") ? "flex-start" : l.legendPosition.includes("right") ? "flex-end" : "center");
40
+ y.selectors.label + "";
41
+ function u(e) {
42
+ n.value = e, r("labelHover", e);
43
+ }
44
+ function L(e, a, t) {
45
+ r("click", t, { index: a, item: e });
46
+ }
47
+ function C(e) {
48
+ r("scroll", e.deltaY);
49
+ }
50
+ const W = s(() => {
51
+ const e = Object.values(l.categories).map(
52
+ (a, t) => `var(--vis-color${t})`
53
+ );
54
+ return Object.values(l.categories).map(
55
+ (a, t) => a.color ?? e[t]
56
+ );
57
+ });
58
+ return (e, a) => (m(), g("div", {
59
+ style: c({
60
+ display: "flex",
61
+ flexDirection: x.value ? "column-reverse" : "column",
62
+ gap: "var(--vis-legend-spacing)"
63
+ })
64
+ }, [
65
+ o(i(O), {
66
+ data: l.data,
67
+ height: l.height,
68
+ onWheel: C
69
+ }, {
70
+ default: P(() => [
71
+ o(i($), {
72
+ x: l.x,
73
+ length: l.length,
74
+ lineWidth: l.lineWidth,
75
+ rowHeight: l.rowHeight,
76
+ type: l.type,
77
+ color: W.value,
78
+ labelWidth: l.labelWidth,
79
+ showLabels: l.showLabels,
80
+ onClick: L
81
+ }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
82
+ o(i(D), {
83
+ triggers: {
84
+ [i(y).selectors.label]: (t) => {
85
+ var p;
86
+ return u(t), t ? (p = d.value) == null ? void 0 : p.innerHTML : "";
87
+ }
88
+ }
89
+ }, null, 8, ["triggers"]),
90
+ o(i(G), F({
91
+ type: "x",
92
+ tickFormat: e.xTickFormat || i(S),
93
+ numTicks: e.xNumTicks,
94
+ "tick-line": e.xTickLine,
95
+ "grid-line": e.xGridLine,
96
+ "domain-line": e.xDomainLine
97
+ }, e.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line"])
98
+ ]),
99
+ _: 1
100
+ }, 8, ["data", "height"]),
101
+ l.hideLegend ? f("", !0) : (m(), g("div", {
102
+ key: 0,
103
+ style: c({
104
+ display: "flex",
105
+ justifyContent: b.value
106
+ })
107
+ }, [
108
+ o(i(M), {
109
+ style: c([
110
+ l.legendStyle,
111
+ "display: flex; gap: var(--vis-legend-spacing);"
112
+ ]),
113
+ items: Object.values(l.categories).map((t) => ({
114
+ ...t,
115
+ color: Array.isArray(t.color) ? t.color[0] : t.color
116
+ }))
117
+ }, null, 8, ["style", "items"])
118
+ ], 4)),
119
+ H("div", {
120
+ ref_key: "slotWrapper",
121
+ ref: d,
122
+ style: { display: "none" }
123
+ }, [
124
+ i(v).labelTooltip ? h(e.$slots, "labelTooltip", {
125
+ key: 0,
126
+ values: n.value
127
+ }) : n.value ? h(e.$slots, "fallback", { key: 1 }, () => [
128
+ o(j, {
129
+ data: n.value,
130
+ categories: e.categories,
131
+ toolTipTitle: i(N)(n.value) ?? ""
132
+ }, null, 8, ["data", "categories", "toolTipTitle"])
133
+ ]) : f("", !0)
134
+ ], 512)
135
+ ], 4));
136
+ }
137
+ });
138
+ export {
139
+ I as default
140
+ };
@@ -0,0 +1,33 @@
1
+ import { GanttChartProps } from '../../types';
2
+ export interface TimelineCategory {
3
+ name: string;
4
+ color?: string | string[];
5
+ }
6
+ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
7
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
8
+ readonly onClick?: ((event: MouseEvent, data: {
9
+ index: number;
10
+ item: T;
11
+ }) => any) | undefined;
12
+ readonly onScroll?: ((distance: number) => any) | undefined;
13
+ readonly onLabelHover?: ((item: T | undefined) => any) | undefined;
14
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onScroll" | "onLabelHover"> & GanttChartProps<T> & Partial<{}>> & import('vue').PublicProps;
15
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
16
+ attrs: any;
17
+ slots: {
18
+ labelTooltip?(_: {
19
+ values: T | undefined;
20
+ }): any;
21
+ fallback?(_: {}): any;
22
+ };
23
+ emit: ((evt: "click", event: MouseEvent, data: {
24
+ index: number;
25
+ item: T;
26
+ }) => void) & ((evt: "scroll", distance: number) => void) & ((evt: "labelHover", item: T | undefined) => void);
27
+ }>) => import('vue').VNode & {
28
+ __ctx?: Awaited<typeof __VLS_setup>;
29
+ };
30
+ export default _default;
31
+ type __VLS_PrettifyLocal<T> = {
32
+ [K in keyof T]: T[K];
33
+ } & {};
@@ -0,0 +1,4 @@
1
+ import f from "./GanttChart.js";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,112 @@
1
+ import { BulletLegendItemInterface, CrosshairConfig, LegendPosition, AxisConfig } from '../../types';
2
+ export interface GanttChartProps<T> {
3
+ /**
4
+ * The data to be displayed in the timeline chart.
5
+ * Each element of the array represents a timeline event or item.
6
+ * The structure of 'T' should be compatible with the chart's rendering logic.
7
+ */
8
+ data: T[];
9
+ /**
10
+ * The width of the label area in pixels.
11
+ * Default: 220
12
+ */
13
+ labelWidth?: number;
14
+ /**
15
+ * The height of the chart in pixels.
16
+ */
17
+ height?: number;
18
+ /**
19
+ * Optional title for the timeline chart.
20
+ */
21
+ title?: string;
22
+ /**
23
+ * A record mapping category keys to `BulletLegendItemInterface` objects.
24
+ * This defines the visual representation and labels for each category in the chart's legend.
25
+ */
26
+ categories: Record<string, BulletLegendItemInterface>;
27
+ /**
28
+ * Accessor function that returns the x-position (start time/value) for each timeline item.
29
+ * @param {T} d - The data item.
30
+ * @returns {number} The x-position value.
31
+ */
32
+ x: (d: T) => number;
33
+ /**
34
+ * Accessor function that returns the length (duration) for each timeline item.
35
+ * @param {T} d - The data item.
36
+ * @returns {number} The length/duration value.
37
+ */
38
+ length: (d: T) => number;
39
+ /**
40
+ * Accessor function that returns the type/category for each timeline item.
41
+ * This determines the color and style of the timeline bar.
42
+ * @param {T} d - The data item.
43
+ * @returns {string} The type/category identifier.
44
+ */
45
+ type: (d: T) => string;
46
+ /**
47
+ * Optional custom tooltip text generator function.
48
+ * @param {string} label - The label of the item.
49
+ * @param {number} index - The index of the item in the data array.
50
+ * @param {T[]} data - The full data array.
51
+ * @returns {string} The formatted tooltip text.
52
+ */
53
+ getTooltipText?: (label: string, index: number, data: T[]) => string;
54
+ /**
55
+ * The desired number of ticks on the x-axis.
56
+ */
57
+ xNumTicks?: number;
58
+ /**
59
+ * If `true`, displays labels for each timeline row.
60
+ * Default: true
61
+ */
62
+ showLabels?: boolean;
63
+ /**
64
+ * If `true`, hides the chart tooltip.
65
+ */
66
+ hideTooltip?: boolean;
67
+ /**
68
+ * Crosshair configuration object for customizing the appearance of the crosshair line.
69
+ */
70
+ crosshairConfig?: CrosshairConfig;
71
+ /**
72
+ * The width of the timeline bars in pixels.
73
+ * Default: 12
74
+ */
75
+ lineWidth?: number;
76
+ /**
77
+ * The height of each row in the timeline in pixels.
78
+ * Default: 24
79
+ */
80
+ rowHeight?: number;
81
+ /**
82
+ * Optional position for the legend, if applicable.
83
+ * See `LegendPosition` for available options.
84
+ * Default: LegendPosition.TopRight
85
+ */
86
+ legendPosition?: LegendPosition;
87
+ /**
88
+ * Optional style object for the legend container. Allows custom CSS styling.
89
+ */
90
+ legendStyle?: string | Record<string, string>;
91
+ /**
92
+ * If `true`, hides the chart legend.
93
+ */
94
+ hideLegend?: boolean;
95
+ /**
96
+ * If `true`, displays tick lines on the x-axis.
97
+ */
98
+ xTickLine?: boolean;
99
+ xTickFormat?: (tick: number | Date, i?: number, ticks?: number[] | Date[]) => string;
100
+ xMinMaxTicksOnly?: boolean;
101
+ xTickValues?: number[] | Date[];
102
+ xGridLine?: boolean;
103
+ xDomainLine?: boolean;
104
+ /**
105
+ * Axis configuration object for customizing the appearance of the axes.
106
+ */
107
+ xAxisConfig?: AxisConfig;
108
+ /**
109
+ * Axis configuration object for customizing the appearance of the axes.
110
+ */
111
+ yAxisConfig?: AxisConfig;
112
+ }
@@ -1,157 +1,55 @@
1
- import { defineComponent as N, computed as f, useSlots as P, useTemplateRef as O, ref as j, createElementBlock as p, openBlock as a, normalizeClass as w, normalizeStyle as k, createVNode as m, createCommentVNode as r, createElementVNode as M, unref as i, withCtx as W, createBlock as d, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
2
- import { Position as v, CurveType as X } from "@unovis/ts";
3
- import { createMarkers as $, getFirstPropertyValue as R } from "../../utils.js";
4
- import S from "../Tooltip.js";
5
- import { VisXYContainer as Y, VisTooltip as H, VisLine as I, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
6
- import { LegendPosition as J } from "../../types.js";
7
- const Q = {
8
- ref: "slotWrapper",
9
- style: { display: "none" }
10
- }, te = /* @__PURE__ */ N({
1
+ import { defineComponent as t, useSlots as a, createBlock as r, openBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
2
+ import x from "../AreaChart/AreaChart.js";
3
+ const u = /* @__PURE__ */ t({
11
4
  __name: "LineChart",
12
5
  props: {
13
6
  data: {},
14
7
  height: {},
15
8
  xLabel: {},
16
9
  yLabel: {},
17
- padding: { default: () => ({
18
- top: 5,
19
- right: 5,
20
- bottom: 5,
21
- left: 5
22
- }) },
10
+ padding: {},
23
11
  categories: {},
24
12
  markerConfig: {},
25
- xFormatter: {},
26
- yFormatter: {},
13
+ xFormatter: { type: Function },
14
+ yFormatter: { type: Function },
27
15
  curveType: {},
28
- lineWidth: { default: 2 },
16
+ lineWidth: {},
29
17
  lineDashArray: {},
30
- xNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
18
+ xNumTicks: {},
31
19
  xExplicitTicks: {},
32
20
  minMaxTicksOnly: { type: Boolean },
33
- yNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
34
- hideTooltip: { type: Boolean },
21
+ yNumTicks: {},
35
22
  hideLegend: { type: Boolean },
23
+ hideTooltip: { type: Boolean },
36
24
  legendPosition: {},
37
- xGridLine: { type: Boolean },
25
+ legendStyle: {},
38
26
  xDomainLine: { type: Boolean },
39
- yGridLine: { type: Boolean },
40
27
  yDomainLine: { type: Boolean },
41
28
  xTickLine: { type: Boolean },
42
29
  yTickLine: { type: Boolean },
30
+ xGridLine: { type: Boolean },
31
+ yGridLine: { type: Boolean },
43
32
  hideXAxis: { type: Boolean },
44
33
  hideYAxis: { type: Boolean },
45
- crosshairConfig: { default: () => ({
46
- color: "#666"
47
- }) },
34
+ crosshairConfig: {},
35
+ xAxisConfig: {},
36
+ yAxisConfig: {},
48
37
  yDomain: {},
49
38
  xDomain: {}
50
39
  },
51
- emits: ["click"],
52
- setup(n, { emit: L }) {
53
- const D = L, o = n, C = f(() => o.markerConfig ? $(o.markerConfig) : ""), B = P(), c = O("slotWrapper"), l = j();
54
- function b(e) {
55
- return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
56
- }
57
- function A(e) {
58
- return l.value = e, b();
59
- }
60
- const y = f(
61
- () => o.legendPosition === J.Top
62
- ), V = Object.values(o.categories).map(
63
- (e, s) => `var(--vis-color${s})`
64
- ), F = (e) => Object.values(o.categories)[e].color ?? V[e];
65
- return (e, s) => (a(), p("div", {
66
- style: k({
67
- display: "flex",
68
- flexDirection: y.value ? "column-reverse" : "column",
69
- gap: "1rem"
70
- }),
71
- class: w({ markers: !!o.markerConfig }),
72
- onClick: s[0] || (s[0] = (t) => D("click", t, l.value))
73
- }, [
74
- m(i(Y), {
75
- data: e.data,
76
- padding: e.padding,
77
- height: e.height,
78
- svgDefs: C.value,
79
- yDomain: e.yDomain,
80
- xDomain: e.xDomain
81
- }, {
82
- default: W(() => [
83
- m(i(H), {
84
- "horizontal-placement": i(v).Right,
85
- "vertical-placement": i(v).Top
86
- }, null, 8, ["horizontal-placement", "vertical-placement"]),
87
- (a(!0), p(z, null, E(Object.keys(o.categories), (t, u) => (a(), d(i(I), {
88
- key: u,
89
- x: (g, x) => x,
90
- y: (g) => g[t],
91
- color: F(u),
92
- "curve-type": e.curveType ?? i(X).MonotoneX,
93
- "line-width": e.lineWidth,
94
- lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
95
- }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
96
- e.hideXAxis ? r("", !0) : (a(), d(i(T), {
97
- key: 0,
98
- type: "x",
99
- "tick-format": e.xFormatter,
100
- label: e.xLabel,
101
- "label-margin": 8,
102
- "domain-line": e.xDomainLine,
103
- "grid-line": e.xGridLine,
104
- "tick-line": e.xTickLine,
105
- "num-ticks": e.xNumTicks,
106
- "tick-values": e.xExplicitTicks,
107
- "min-max-ticks-only": e.minMaxTicksOnly
108
- }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
109
- e.hideYAxis ? r("", !0) : (a(), d(i(T), {
110
- key: 1,
111
- type: "y",
112
- "tick-format": e.yFormatter,
113
- label: e.yLabel,
114
- "num-ticks": e.yNumTicks,
115
- "domain-line": e.yDomainLine,
116
- "grid-line": e.yGridLine,
117
- "tick-line": e.yTickLine
118
- }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
119
- e.hideTooltip ? r("", !0) : (a(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: A }), null, 16))
40
+ setup(o) {
41
+ const i = o;
42
+ return a(), (e, h) => (l(), r(x, p(i, { "hide-area": !0 }), s({ _: 2 }, [
43
+ e.$slots.tooltip ? {
44
+ name: "tooltip",
45
+ fn: y((n) => [
46
+ c(e.$slots, "tooltip", m(d(n)))
120
47
  ]),
121
- _: 1
122
- }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
123
- e.hideLegend ? r("", !0) : (a(), p("div", {
124
- key: 0,
125
- style: k({
126
- display: "flex",
127
- alignItems: "center",
128
- justifyContent: "flex-end",
129
- paddingBottom: y.value ? "1rem" : void 0
130
- })
131
- }, [
132
- m(i(q), {
133
- items: Object.values(o.categories).map((t) => ({
134
- ...t,
135
- color: Array.isArray(t.color) ? t.color[0] : t.color
136
- }))
137
- }, null, 8, ["items"])
138
- ], 4)),
139
- M("div", Q, [
140
- i(B).tooltip ? h(e.$slots, "tooltip", {
141
- key: 0,
142
- values: l.value
143
- }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
144
- m(S, {
145
- data: l.value,
146
- categories: e.categories,
147
- toolTipTitle: i(R)(l.value) ?? "",
148
- yFormatter: o.yFormatter
149
- }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
150
- ]) : r("", !0)
151
- ], 512)
152
- ], 6));
48
+ key: "0"
49
+ } : void 0
50
+ ]), 1040));
153
51
  }
154
52
  });
155
53
  export {
156
- te as default
54
+ u as default
157
55
  };
@@ -1,17 +1,18 @@
1
1
  import { LineChartProps } from './types';
2
2
  declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
- props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
4
- readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
5
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
3
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
6
4
  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
7
5
  attrs: any;
8
- slots: {
9
- tooltip?(_: {
6
+ slots: Readonly<{
7
+ tooltip?: (props: {
10
8
  values: T | undefined;
11
- }): any;
12
- fallback?(_: {}): any;
9
+ }) => any;
10
+ }> & {
11
+ tooltip?: (props: {
12
+ values: T | undefined;
13
+ }) => any;
13
14
  };
14
- emit: (e: "click", event: MouseEvent, values?: T) => void;
15
+ emit: {};
15
16
  }>) => import('vue').VNode & {
16
17
  __ctx?: Awaited<typeof __VLS_setup>;
17
18
  };
@@ -1,140 +1,2 @@
1
- import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } from '../../types';
2
- export interface LineChartProps<T> {
3
- /**
4
- * The data to be displayed in the line chart.
5
- * Each element of the array represents a data point.
6
- * The structure of 'T' should be compatible with the chart's rendering logic.
7
- */
8
- data: T[];
9
- /**
10
- * The height of the chart in pixels.
11
- */
12
- height: number;
13
- /**
14
- * Optional label for the x-axis.
15
- */
16
- xLabel?: string;
17
- /**
18
- * Optional label for the y-axis.
19
- */
20
- yLabel?: string;
21
- /**
22
- * Optional padding applied to the chart.
23
- * Allows specifying individual padding values for the top, right, bottom, and left sides.
24
- */
25
- padding?: {
26
- top: number;
27
- right: number;
28
- bottom: number;
29
- left: number;
30
- };
31
- /**
32
- * A record mapping category keys to `BulletLegendItemInterface` objects.
33
- * This defines the visual representation and labels for each category in the chart's legend.
34
- */
35
- categories: Record<string, BulletLegendItemInterface>;
36
- /**
37
- * A record mapping marker keys to show custom patterns.
38
- */
39
- markerConfig?: Record<string, MarkerConfig>;
40
- /**
41
- * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
42
- * @param {number} i - The index of the tick in the `ticks` array.
43
- * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
44
- * @returns {string} The formatted string representation of the tick.
45
- */
46
- xFormatter?: axisFormatter;
47
- /**
48
- * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
49
- * @param {number} i - The index of the tick in the `ticks` array.
50
- * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
51
- * @returns {string} The formatted string representation of the tick.
52
- */
53
- yFormatter?: axisFormatter;
54
- /**
55
- * The type of curve to use for the line chart.
56
- * See `CurveType` for available options.
57
- */
58
- curveType?: CurveType;
59
- /**
60
- * The width of the line in pixels. Default is 2px.
61
- */
62
- lineWidth?: number;
63
- /**
64
- * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
65
- */
66
- lineDashArray?: number[][];
67
- /**
68
- * The desired number of ticks on the x-axis.
69
- */
70
- xNumTicks?: number;
71
- /**
72
- * Force specific ticks on the x-axis.
73
- */
74
- xExplicitTicks?: (number | string | Date)[];
75
- /**
76
- * Force only first and last ticks on the x-axis.
77
- */
78
- minMaxTicksOnly?: boolean;
79
- /**
80
- * The desired number of ticks on the y-axis.
81
- */
82
- yNumTicks?: number;
83
- /**
84
- * If `true`, hides the chart tooltip.
85
- */
86
- hideTooltip?: boolean;
87
- /**
88
- * If `true`, hides the chart legend.
89
- */
90
- hideLegend?: boolean;
91
- /**
92
- * Optional position for the legend, if applicable.
93
- * See `LegendPosition` for available options.
94
- */
95
- legendPosition?: LegendPosition;
96
- /**
97
- * If `true`, displays grid lines along the x-axis.
98
- */
99
- xGridLine?: boolean;
100
- /**
101
- * If `true`, displays a domain line (axis line) along the x-axis.
102
- */
103
- xDomainLine?: boolean;
104
- /**
105
- * If `true`, displays grid lines along the y-axis.
106
- */
107
- yGridLine?: boolean;
108
- /**
109
- * If `true`, displays a domain line (axis line) along the y-axis.
110
- */
111
- yDomainLine?: boolean;
112
- /**
113
- * If `true`, displays tick lines on the x-axis.
114
- */
115
- xTickLine?: boolean;
116
- /**
117
- * If `true`, displays tick lines on the y-axis.
118
- */
119
- yTickLine?: boolean;
120
- /**
121
- * If `true`, hide the x-axis.
122
- */
123
- hideXAxis?: boolean;
124
- /**
125
- * If `true`, hide the y-axis.
126
- */
127
- hideYAxis?: boolean;
128
- /**
129
- * Crosshair configuration object for customizing the appearance of the crosshair line.
130
- */
131
- crosshairConfig?: CrosshairConfig;
132
- /**
133
- * The domain for the y-axis, specified as a tuple of two values.
134
- */
135
- yDomain?: [number | undefined, number | undefined];
136
- /**
137
- * The domain for the x-axis, specified as a tuple of two values.
138
- */
139
- xDomain?: [number | undefined, number | undefined];
140
- }
1
+ import { AreaChartProps } from '../AreaChart/types';
2
+ export type LineChartProps<T> = Omit<AreaChartProps<T>, "hideArea" | "gradientStops">;