@automattic/charts 0.3.0 → 0.4.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 (123) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/bar-chart/index.js +2 -3
  3. package/dist/cjs/components/bar-chart/index.js.map +1 -1
  4. package/dist/cjs/components/bar-chart/style.css +94 -5
  5. package/dist/cjs/components/grid-control/index.js +2 -3
  6. package/dist/cjs/components/grid-control/index.js.map +1 -1
  7. package/dist/cjs/components/grid-control/style.css +94 -2
  8. package/dist/cjs/components/legend/index.js +2 -3
  9. package/dist/cjs/components/legend/index.js.map +1 -1
  10. package/dist/cjs/components/legend/style.css +94 -2
  11. package/dist/cjs/components/line-chart/index.js +2 -3
  12. package/dist/cjs/components/line-chart/index.js.map +1 -1
  13. package/dist/cjs/components/line-chart/style.css +94 -3
  14. package/dist/cjs/components/pie-chart/index.js +2 -3
  15. package/dist/cjs/components/pie-chart/index.js.map +1 -1
  16. package/dist/cjs/components/pie-chart/style.css +94 -4
  17. package/dist/cjs/components/pie-semi-circle-chart/index.js +2 -3
  18. package/dist/cjs/components/pie-semi-circle-chart/index.js.map +1 -1
  19. package/dist/cjs/components/pie-semi-circle-chart/style.css +94 -4
  20. package/dist/cjs/components/tooltip/index.js +2 -3
  21. package/dist/cjs/components/tooltip/index.js.map +1 -1
  22. package/dist/cjs/components/tooltip/style.css +94 -2
  23. package/dist/cjs/index.js +2 -3
  24. package/dist/cjs/index.js.map +1 -1
  25. package/dist/cjs/providers/theme/index.js +2 -3
  26. package/dist/cjs/providers/theme/index.js.map +1 -1
  27. package/dist/cjs/providers/theme/style.css +95 -0
  28. package/dist/cjs/style.css +95 -9
  29. package/dist/index.d.ts +301 -0
  30. package/dist/mjs/components/bar-chart/index.js +2 -3
  31. package/dist/mjs/components/bar-chart/index.js.map +1 -1
  32. package/dist/mjs/components/bar-chart/style.css +94 -5
  33. package/dist/mjs/components/grid-control/index.js +2 -3
  34. package/dist/mjs/components/grid-control/index.js.map +1 -1
  35. package/dist/mjs/components/grid-control/style.css +94 -2
  36. package/dist/mjs/components/legend/index.js +2 -3
  37. package/dist/mjs/components/legend/index.js.map +1 -1
  38. package/dist/mjs/components/legend/style.css +94 -2
  39. package/dist/mjs/components/line-chart/index.js +2 -3
  40. package/dist/mjs/components/line-chart/index.js.map +1 -1
  41. package/dist/mjs/components/line-chart/style.css +94 -3
  42. package/dist/mjs/components/pie-chart/index.js +2 -3
  43. package/dist/mjs/components/pie-chart/index.js.map +1 -1
  44. package/dist/mjs/components/pie-chart/style.css +94 -4
  45. package/dist/mjs/components/pie-semi-circle-chart/index.js +2 -3
  46. package/dist/mjs/components/pie-semi-circle-chart/index.js.map +1 -1
  47. package/dist/mjs/components/pie-semi-circle-chart/style.css +94 -4
  48. package/dist/mjs/components/tooltip/index.js +2 -3
  49. package/dist/mjs/components/tooltip/index.js.map +1 -1
  50. package/dist/mjs/components/tooltip/style.css +94 -2
  51. package/dist/mjs/index.js +2 -3
  52. package/dist/mjs/index.js.map +1 -1
  53. package/dist/mjs/providers/theme/index.js +2 -3
  54. package/dist/mjs/providers/theme/index.js.map +1 -1
  55. package/dist/mjs/providers/theme/style.css +95 -0
  56. package/dist/mjs/style.css +95 -9
  57. package/global.d.ts +14 -0
  58. package/package.json +29 -8
  59. package/rollup.config.mjs +142 -0
  60. package/src/components/line-chart/line-chart.tsx +50 -15
  61. package/src/components/pie-chart/__tests__/pie-chart.test.tsx +59 -0
  62. package/src/components/pie-chart/pie-chart.tsx +91 -6
  63. package/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx +17 -12
  64. package/src/components/shared/with-responsive.tsx +4 -3
  65. package/src/types.ts +25 -0
  66. package/tests/jest.config.cjs +12 -0
  67. package/tests/jest.setup.js +13 -0
  68. package/dist/cjs/components/bar-chart/index.js.LICENSE.txt +0 -9
  69. package/dist/cjs/components/bar-chart/style.css.map +0 -1
  70. package/dist/cjs/components/grid-control/index.js.LICENSE.txt +0 -9
  71. package/dist/cjs/components/grid-control/style.css.map +0 -1
  72. package/dist/cjs/components/legend/index.js.LICENSE.txt +0 -9
  73. package/dist/cjs/components/legend/style.css.map +0 -1
  74. package/dist/cjs/components/line-chart/index.js.LICENSE.txt +0 -9
  75. package/dist/cjs/components/line-chart/style.css.map +0 -1
  76. package/dist/cjs/components/pie-chart/index.js.LICENSE.txt +0 -9
  77. package/dist/cjs/components/pie-chart/style.css.map +0 -1
  78. package/dist/cjs/components/pie-semi-circle-chart/index.js.LICENSE.txt +0 -9
  79. package/dist/cjs/components/pie-semi-circle-chart/style.css.map +0 -1
  80. package/dist/cjs/components/tooltip/index.js.LICENSE.txt +0 -9
  81. package/dist/cjs/components/tooltip/style.css.map +0 -1
  82. package/dist/cjs/index.js.LICENSE.txt +0 -9
  83. package/dist/cjs/providers/theme/index.js.LICENSE.txt +0 -9
  84. package/dist/cjs/style.css.map +0 -1
  85. package/dist/mjs/components/bar-chart/index.js.LICENSE.txt +0 -9
  86. package/dist/mjs/components/bar-chart/style.css.map +0 -1
  87. package/dist/mjs/components/grid-control/index.js.LICENSE.txt +0 -9
  88. package/dist/mjs/components/grid-control/style.css.map +0 -1
  89. package/dist/mjs/components/legend/index.js.LICENSE.txt +0 -9
  90. package/dist/mjs/components/legend/style.css.map +0 -1
  91. package/dist/mjs/components/line-chart/index.js.LICENSE.txt +0 -9
  92. package/dist/mjs/components/line-chart/style.css.map +0 -1
  93. package/dist/mjs/components/pie-chart/index.js.LICENSE.txt +0 -9
  94. package/dist/mjs/components/pie-chart/style.css.map +0 -1
  95. package/dist/mjs/components/pie-semi-circle-chart/index.js.LICENSE.txt +0 -9
  96. package/dist/mjs/components/pie-semi-circle-chart/style.css.map +0 -1
  97. package/dist/mjs/components/tooltip/index.js.LICENSE.txt +0 -9
  98. package/dist/mjs/components/tooltip/style.css.map +0 -1
  99. package/dist/mjs/index.js.LICENSE.txt +0 -9
  100. package/dist/mjs/providers/theme/index.js.LICENSE.txt +0 -9
  101. package/dist/mjs/style.css.map +0 -1
  102. package/dist/types/components/bar-chart/bar-chart.d.ts +0 -5
  103. package/dist/types/components/bar-chart/index.d.ts +0 -1
  104. package/dist/types/components/grid-control/grid-control.d.ts +0 -4
  105. package/dist/types/components/grid-control/index.d.ts +0 -1
  106. package/dist/types/components/legend/base-legend.d.ts +0 -3
  107. package/dist/types/components/legend/index.d.ts +0 -2
  108. package/dist/types/components/legend/types.d.ts +0 -12
  109. package/dist/types/components/line-chart/index.d.ts +0 -1
  110. package/dist/types/components/line-chart/line-chart.d.ts +0 -11
  111. package/dist/types/components/pie-chart/index.d.ts +0 -1
  112. package/dist/types/components/pie-chart/pie-chart.d.ts +0 -9
  113. package/dist/types/components/pie-semi-circle-chart/index.d.ts +0 -1
  114. package/dist/types/components/pie-semi-circle-chart/pie-semi-circle-chart.d.ts +0 -22
  115. package/dist/types/components/shared/with-responsive.d.ts +0 -17
  116. package/dist/types/components/tooltip/base-tooltip.d.ts +0 -29
  117. package/dist/types/components/tooltip/index.d.ts +0 -2
  118. package/dist/types/hooks/use-chart-mouse-handler.d.ts +0 -41
  119. package/dist/types/index.d.ts +0 -8
  120. package/dist/types/providers/theme/index.d.ts +0 -2
  121. package/dist/types/providers/theme/theme-provider.d.ts +0 -18
  122. package/dist/types/providers/theme/themes.d.ts +0 -14
  123. package/dist/types/types.d.ts +0 -137
@@ -1,137 +0,0 @@
1
- import type { CSSProperties } from 'react';
2
- export type DataPoint = {
3
- label: string;
4
- value: number;
5
- };
6
- export type DataPointDate = {
7
- date: Date;
8
- label?: string;
9
- value: number;
10
- };
11
- export type SeriesData = {
12
- group?: string;
13
- label: string;
14
- data: DataPointDate[] | DataPoint[];
15
- };
16
- export type MultipleDataPointsDate = {
17
- label: string;
18
- data: DataPointDate[];
19
- };
20
- export type DataPointPercentage = {
21
- /**
22
- * Label for the data point
23
- */
24
- label: string;
25
- /**
26
- * Numerical value
27
- */
28
- value: number;
29
- /**
30
- * Formatted value for display
31
- */
32
- valueDisplay?: string;
33
- /**
34
- * Percentage value
35
- */
36
- percentage: number;
37
- /**
38
- * Color code for the segment, by default colours are taken from the theme but this property can overrides it
39
- */
40
- color?: string;
41
- };
42
- /**
43
- * Theme configuration for chart components
44
- */
45
- export type ChartTheme = {
46
- /** Background color for chart components */
47
- backgroundColor: string;
48
- /** Background color for labels */
49
- labelBackgroundColor?: string;
50
- /** Array of colors used for data visualization */
51
- colors: string[];
52
- /** Optional CSS styles for grid lines */
53
- gridStyles?: CSSProperties;
54
- /** Length of axis ticks in pixels */
55
- tickLength: number;
56
- /** Color of the grid lines */
57
- gridColor: string;
58
- /** Color of the grid lines in dark mode */
59
- gridColorDark: string;
60
- };
61
- /**
62
- * Base properties shared across all chart components
63
- */
64
- export type BaseChartProps<T = DataPoint | DataPointDate> = {
65
- /**
66
- * Array of data points to display in the chart
67
- */
68
- data: T extends DataPoint | DataPointDate ? T[] : T;
69
- /**
70
- * Additional CSS class name for the chart container
71
- */
72
- className?: string;
73
- /**
74
- * Width of the chart in pixels
75
- */
76
- width?: number;
77
- /**
78
- * Height of the chart in pixels
79
- */
80
- height?: number;
81
- /**
82
- * Chart margins
83
- */
84
- margin?: {
85
- top: number;
86
- right: number;
87
- bottom: number;
88
- left: number;
89
- };
90
- /**
91
- * Whether to show tooltips on hover. False by default.
92
- */
93
- withTooltips?: boolean;
94
- /**
95
- * Whether to show legend
96
- */
97
- showLegend?: boolean;
98
- /**
99
- * Legend orientation
100
- */
101
- legendOrientation?: 'horizontal' | 'vertical';
102
- /**
103
- * Grid visibility. x is default.
104
- */
105
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
106
- };
107
- /**
108
- * Properties for grid components
109
- */
110
- export type GridProps = {
111
- /**
112
- * Width of the grid in pixels
113
- */
114
- width: number;
115
- /**
116
- * Height of the grid in pixels
117
- */
118
- height: number;
119
- /**
120
- * Grid visibility. x is default.
121
- */
122
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
123
- /**
124
- * X-axis scale for the grid
125
- * TODO: Fix any type after resolving visx scale type issues
126
- */
127
- xScale: any;
128
- /**
129
- * Y-axis scale for the grid
130
- * TODO: Fix any type after resolving visx scale type issues
131
- */
132
- yScale: any;
133
- /**
134
- * Top offset for the grid
135
- */
136
- top?: number;
137
- };