@mattilsynet/design 2.2.9 → 2.11.0-canary

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 (26) hide show
  1. package/mtds/chart/chart-axis.d.ts +2 -1
  2. package/mtds/chart/chart-axis.js +16 -16
  3. package/mtds/chart/chart-axis.js.map +1 -1
  4. package/mtds/chart/chart-element.d.ts +2 -0
  5. package/mtds/chart/chart-element.js +55 -41
  6. package/mtds/chart/chart-element.js.map +1 -1
  7. package/mtds/chart/chart-lines.d.ts +1 -1
  8. package/mtds/chart/chart-lines.js +30 -30
  9. package/mtds/chart/chart-lines.js.map +1 -1
  10. package/mtds/chart/chart-pies.d.ts +5 -2
  11. package/mtds/chart/chart-pies.js +10 -10
  12. package/mtds/chart/chart-pies.js.map +1 -1
  13. package/mtds/chart/chart.css.js +105 -38
  14. package/mtds/chart/chart.css.js.map +1 -1
  15. package/mtds/chart/chart.d.ts +4 -0
  16. package/mtds/chart/chart.js +9 -9
  17. package/mtds/chart/chart.js.map +1 -1
  18. package/mtds/chart/chart.stories.d.ts +5 -3
  19. package/mtds/index.iife.js +114 -47
  20. package/mtds/lawpicker/lawpicker-element.d.ts +18 -0
  21. package/mtds/lawpicker/lawpicker.stories.d.ts +10 -0
  22. package/mtds/package.json.js +2 -2
  23. package/mtds/popover/popover-observer.js +19 -18
  24. package/mtds/popover/popover-observer.js.map +1 -1
  25. package/mtds/styles.css +1 -1
  26. package/package.json +20 -14
package/mtds/chart/chart.css.js CHANGED
@@ -32,7 +32,6 @@ const t = `:host(:not([hidden])) {
32
32
 
33
33
  .axis {
34
34
  font-size: var(--mtds-body-sm-font-size);
35
- aspect-ratio: var(--mtdsc-chart-aspect);
36
35
  display: grid;
37
36
  gap: var(--mtdsc-chart-axis-gap);
38
37
  grid-template-columns: fit-content(7em) 1fr;
@@ -43,12 +42,15 @@ const t = `:host(:not([hidden])) {
43
42
  }
44
43
 
45
44
  .axis::before {
45
+ border-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);
46
+ border-color: var(--mtdsc-chart-axis-edge-color);
47
+ border-style: solid;
48
+ border-width: 0 0 var(--mtdsc-chart-axis-edge-width)
49
+ var(--mtdsc-chart-axis-edge-width);
46
50
  content: "";
47
51
  grid-area: chart;
48
- border-style: solid;
49
- border-width: 0 0 var(--mtds-border-width-default)
50
- var(--mtds-border-width-default);
51
- border-bottom-left-radius: var(--mtds-border-radius-lg);
52
+ pointer-events: none;
53
+ z-index: 2;
52
54
  }
53
55
 
54
56
  .axisSteps,
@@ -59,12 +61,19 @@ const t = `:host(:not([hidden])) {
59
61
  display: grid;
60
62
  position: relative; /* Help .lineContainer positioning */
61
63
  }
62
-
63
64
  .axisGroups {
64
- gap: var(--mtdsc-chart-axis-gap);
65
+ --gap: max(
66
+ 1px,
67
+ clamp(
68
+ .5%,
69
+ calc(10% / var(--bars) * var(--groups)),
70
+ var(--mtdsc-chart-axis-gap)
71
+ )
72
+ );
73
+ gap: var(--mtdsc-chart-axis-gap) var(--gap);
65
74
  grid-area: chart / chart / x-axis / chart;
75
+ grid-auto-columns: 1fr;
66
76
  grid-template-rows: subgrid;
67
- grid-auto-columns: minmax(0, 1fr);
68
77
  padding: 0 var(--mtdsc-chart-axis-gap);
69
78
  text-align: center;
70
79
  }
@@ -74,16 +83,34 @@ const t = `:host(:not([hidden])) {
74
83
  }
75
84
  .axisGroup::after {
76
85
  content: attr(data-label);
86
+ direction: ltr; /* Prevent inherited rtl */
87
+ min-width: 0; /* Allow word-wrapping */
88
+ }
89
+ :host(:not([data-variant|="bar"])) {
90
+ .axisGroup::after {
91
+ justify-self: center;
92
+ text-align: start;
93
+ writing-mode: vertical-rl;
94
+ /* If wanting 45deg text: */
95
+ /* justify-self: center;
96
+ rotate: 45deg;
97
+ text-align: end;
98
+ writing-mode: sideways-lr;
99
+ transform-origin: 50% 0; */
100
+ }
77
101
  }
78
102
  .axisSteps {
79
- grid-auto-rows: 1fr;
103
+ align-items: end;
104
+ aspect-ratio: var(--mtdsc-chart-aspect);
80
105
  grid-area: chart / y-axis / chart / chart;
106
+ grid-auto-rows: 1fr;
81
107
  grid-template: 1px / subgrid;
82
108
  }
83
109
  .axisStep {
110
+ align-items: start;
84
111
  grid-column: inherit;
85
112
  grid-template-columns: inherit;
86
- place-content: end start;
113
+ height: 1px;
87
114
  text-align: right;
88
115
  }
89
116
  .axisStep::after {
@@ -92,64 +119,91 @@ const t = `:host(:not([hidden])) {
92
119
  }
93
120
  .axisStep::before {
94
121
  content: attr(data-label);
95
- translate: 0 50%;
122
+ translate: 0 -50%;
96
123
  }
97
124
  .axisStep[data-label="0"]::after {
98
125
  opacity: 0; /* Hide 0 line as it overlapps with .axis::before */
99
126
  }
100
127
 
101
- :host([data-variant|="column"]) .axisSteps,
102
- :host([data-variant|="column"]) .axisGroup {
128
+ /* Reduce amount of steps if small space */
129
+ :host(:not([data-variant|="bar"]))
130
+ .axisStepsYHalf
131
+ .axisStep:nth-last-child(even) {
132
+ display: none;
133
+ }
134
+ :host(:not([data-variant|="bar"]))
135
+ .axisStepsYHalf
136
+ .axisSteps:has(.axisStep:nth-last-child(even):first-child) {
137
+ grid-template-rows: 0.5fr;
138
+ }
139
+
140
+ :host([data-variant|="bar"]) .axisStepsXHalf .axisStep:nth-last-child(even) {
141
+ display: none;
142
+ }
143
+ :host([data-variant|="bar"])
144
+ .axisStepsXHalf
145
+ .axisSteps:has(.axisStep:nth-last-child(even):first-child) {
146
+ grid-template-columns: 0.5fr;
147
+ }
148
+
149
+ :host([data-variant|="bar"]) .axisSteps,
150
+ :host([data-variant|="bar"]) .axisGroup {
103
151
  direction: rtl; /* Reverse orders */
104
152
  }
105
- :host([data-variant|="column"]) .axisSteps > *,
106
- :host([data-variant|="column"]) .axisGroup > * {
153
+ :host([data-variant|="bar"]) .axisSteps > *,
154
+ :host([data-variant|="bar"]) .axisGroup > * {
107
155
  direction: ltr;
108
156
  }
109
- :host([data-variant|="column"]) .axisGroups {
157
+ :host([data-variant|="bar"]) .axisGroups {
158
+ aspect-ratio: var(--mtdsc-chart-aspect);
159
+ gap: 1% var(--mtdsc-chart-axis-gap);
110
160
  grid-area: chart / y-axis / chart / chart;
111
161
  grid-template: none / subgrid;
112
162
  padding: var(--mtdsc-chart-axis-gap) 0;
113
163
  row-gap: var(--mtdsc-chart-axis-gap);
114
164
  text-align: right;
115
165
  }
116
- :host([data-variant|="column"]) .axisGroup::after {
166
+ :host([data-variant|="bar"]) .axisGroup::after {
117
167
  align-self: center; /* Since text-align does not work vertically */
118
168
  }
119
- :host([data-variant|="column"]) .axisGroup {
169
+ :host([data-variant|="bar"]) .axisGroup {
120
170
  grid-column: inherit;
121
171
  grid-row: auto;
122
172
  }
123
- :host([data-variant|="column"]) .axisSteps {
124
- grid-auto-columns: 1fr;
173
+ :host([data-variant|="bar"]) .axisSteps {
174
+ align-items: stretch;
175
+ aspect-ratio: auto;
125
176
  grid-area: chart / chart / x-axis / chart;
177
+ grid-auto-columns: 1fr;
126
178
  grid-template: subgrid / 1px;
127
179
  }
128
- :host([data-variant|="column"]) .axisStep {
180
+ :host([data-variant|="bar"]) .axisStep {
181
+ align-items: stretch;
129
182
  grid-row: inherit;
130
183
  grid-column: auto;
131
184
  grid-template-rows: inherit;
132
185
  grid-template-columns: none;
186
+ text-align: center;
133
187
  }
134
- :host([data-variant|="column"]) .axisStep::after {
188
+ :host([data-variant|="bar"]) .axisStep::after {
135
189
  order: -1;
136
190
  border-left: var(--mtdsc-chart-axis-border);
137
191
  border-bottom: 0;
138
192
  }
139
- :host([data-variant|="column"]) .axisStep::before {
193
+ :host([data-variant|="bar"]) .axisStep::before {
140
194
  translate: -50% 0;
141
195
  }
142
196
 
143
197
  .axisGroupContent {
144
198
  display: flex;
145
199
  }
146
- :host([data-variant="bar-stacked"]) .axisGroupContent {
200
+ :host([data-variant="column-stacked"]) .axisGroupContent {
147
201
  flex-direction: column-reverse;
148
202
  }
149
- :host([data-variant="column"]) .axisGroupContent {
203
+ :host([data-variant="bar"]) .axisGroupContent {
150
204
  flex-direction: column;
151
205
  }
152
- :host([data-variant="column-stacked"]) .axisGroupContent {
206
+ :host([data-variant="bar-stacked"]) .axisGroupContent {
153
207
  flex-direction: row;
154
208
  }
155
209
 
@@ -171,7 +225,7 @@ const t = `:host(:not([hidden])) {
171
225
  z-index: 2; /* z-index to place on top when outlined */
172
226
  }
173
227
 
174
- :host([data-variant|="column"]) .bar {
228
+ :host([data-variant|="bar"]) .bar {
175
229
  border-radius: 0 var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0;
176
230
  width: var(--size);
177
231
  height: 100%;
@@ -181,22 +235,22 @@ const t = `:host(:not([hidden])) {
181
235
  /* Prevent double border - using margin to see border around bars */
182
236
  /* Prevent double border - using border to avoid affecting size */
183
237
  :host(:not([data-variant])) .bar + .bar,
184
- :host([data-variant="bar"]) .bar + .bar {
238
+ :host([data-variant="column"]) .bar + .bar {
185
239
  margin-left: -1px;
186
240
  }
187
- :host([data-variant="bar-stacked"]) .bar:not(:last-child) {
241
+ :host([data-variant="column-stacked"]) .bar:not(:last-child) {
188
242
  border-radius: 0;
189
243
  }
190
- :host([data-variant="bar-stacked"]) .bar + .bar {
244
+ :host([data-variant="column-stacked"]) .bar + .bar {
191
245
  border-bottom: none;
192
246
  }
193
- :host([data-variant="column"]) .bar + .bar {
247
+ :host([data-variant="bar"]) .bar + .bar {
194
248
  margin-top: -1px;
195
249
  }
196
- :host([data-variant="column-stacked"]) .bar:not(:last-child) {
250
+ :host([data-variant="bar-stacked"]) .bar:not(:last-child) {
197
251
  border-radius: 0;
198
252
  }
199
- :host([data-variant="column-stacked"]) .bar + .bar {
253
+ :host([data-variant="bar-stacked"]) .bar + .bar {
200
254
  border-left: none;
201
255
  }
202
256
 
@@ -242,19 +296,19 @@ const t = `:host(:not([hidden])) {
242
296
  mask: linear-gradient(to bottom, black, transparent);
243
297
  }
244
298
 
299
+ /* Ensure more contrast for line colors */
245
300
  .line,
246
301
  .linePoint,
247
302
  :host:has(.linePoint) .legend::before {
248
- filter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */
303
+ filter: var(--_mtdsc-chart-line-filter);
249
304
  }
250
305
 
251
306
  .linePoint {
252
- --size: var(--mtds-3);
253
- background-color: var(--color);
307
+ --size: var(--mtds-2);
308
+ background: var(--color);
254
309
  border-radius: var(--mtds-border-radius-full);
255
310
  border: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);
256
311
  box-sizing: border-box;
257
- filter: brightness(0.8) saturate(2);
258
312
  height: var(--size);
259
313
  margin: calc(var(--size) / -2);
260
314
  padding: 0;
@@ -271,10 +325,17 @@ const t = `:host(:not([hidden])) {
271
325
  }
272
326
  .linePoint::before {
273
327
  content: "";
274
- inset: calc(var(--mtds-2) * -1); /* Increase click surface */
328
+ inset: calc(var(--mtds-3) * -1); /* Increase click surface */
275
329
  position: absolute;
276
330
  }
277
331
 
332
+ :host([data-dots="false"]) .linePoint,
333
+ :host([data-dots="hidden"]) .linePoint,
334
+ :host([data-dots="none"]) .linePoint {
335
+ background: none;
336
+ border: none;
337
+ }
338
+
278
339
  .legends {
279
340
  align-items: center;
280
341
  display: flex;
@@ -298,6 +359,12 @@ const t = `:host(:not([hidden])) {
298
359
  vertical-align: middle;
299
360
  width: var(--mtds-5);
300
361
  }
362
+
363
+ :host([data-legend="false"]) .legends,
364
+ :host([data-legend="hidden"]) .legends,
365
+ :host([data-legend="none"]) .legends {
366
+ display: none;
367
+ }
301
368
  `;
302
369
  export {
303
370
  t as default
package/mtds/chart/chart.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\n}\\n\\n[data-event-proxy] {\\n\\tcursor: pointer;\\n}\\n\\n.pie {\\n\\toverflow: visible;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n}\\n.pie > path {\\n\\tfill: var(--color);\\n\\toutline: none;\\n\\tstroke-width: var(--mtdsc-chart-border-width);\\n\\tstroke: var(--mtdsc-chart-border-color);\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.pie > path:focus-visible,\\n.pie > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis {\\n\\tdisplay: none;\\n}\\n\\n.axis {\\n\\tfont-size: var(--ds-body-sm-font-size);\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tdisplay: grid;\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-template-columns: fit-content(7em) 1fr;\\n\\tgrid-template-rows: 1fr auto;\\n\\tgrid-template-areas:\\n\\t\\t\\\"y-axis chart\\\"\\n\\t\\t\\\"y-axis x-axis\\\";\\n}\\n\\n.axis::before {\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--ds-border-width-default)\\n\\t\\tvar(--ds-border-width-default);\\n\\tborder-bottom-left-radius: var(--ds-border-radius-lg);\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n\\n.axisGroups {\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template-rows: subgrid;\\n\\tgrid-auto-columns: minmax(0, 1fr);\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup {\\n\\tgrid-row: inherit;\\n\\tgrid-template: inherit;\\n}\\n.axisGroup::after {\\n\\tcontent: attr(data-label);\\n}\\n.axisSteps {\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\tplace-content: end start;\\n\\ttext-align: right;\\n}\\n.axisStep::after {\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n\\tcontent: \\\"\\\";\\n}\\n.axisStep::before {\\n\\tcontent: attr(data-label);\\n\\ttranslate: 0 50%;\\n}\\n.axisStep[data-label=\\\"0\\\"]::after {\\n\\topacity: 0; /* Hide 0 line as it overlapps with .axis::before */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .axisSteps,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroups {\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: none / subgrid;\\n\\tpadding: var(--mtdsc-chart-axis-gap) 0;\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps {\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep {\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"column\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: row;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\talign-self: end;\\n\\tbackground: var(--color);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tborder-radius: var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0 0;\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\twidth: 100%;\\n}\\n.bar:focus-visible,\\n.linePoint:focus-visible {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .bar {\\n\\tborder-radius: 0 var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0;\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\talign-self: start;\\n}\\n\\n/* Prevent double border - using margin to see border around bars */\\n/* Prevent double border - using border to avoid affecting size */\\n:host(:not([data-variant])) .bar + .bar,\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-left: -1px;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar {\\n\\tborder-bottom: none;\\n}\\n:host([data-variant=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-top: -1px;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar {\\n\\tborder-left: none;\\n}\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n\\tgrid-row: chart;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups {\\n\\tpadding: 0;\\n}\\n\\n.line,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 1.5;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n\\n.line,\\n.linePoint,\\n:host:has(.linePoint) .legend::before {\\n\\tfilter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */\\n}\\n\\n.linePoint {\\n\\t--size: var(--ds-size-3);\\n\\tbackground-color: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\\n\\tbox-sizing: border-box;\\n\\tfilter: brightness(0.8) saturate(2);\\n\\theight: var(--size);\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint:focus-visible,\\n.linePoint:hover {\\n\\tscale: 1.3;\\n}\\n.linePoint::before {\\n\\tcontent: \\\"\\\";\\n\\tinset: calc(var(--ds-size-2) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--ds-size-2) var(--ds-size-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\theight: var(--ds-size-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-5);\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1
+ {"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\n}\\n\\n[data-event-proxy] {\\n\\tcursor: pointer;\\n}\\n\\n.pie {\\n\\toverflow: visible;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n}\\n.pie > path {\\n\\tfill: var(--color);\\n\\toutline: none;\\n\\tstroke-width: var(--mtdsc-chart-border-width);\\n\\tstroke: var(--mtdsc-chart-border-color);\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.pie > path:focus-visible,\\n.pie > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis {\\n\\tdisplay: none;\\n}\\n\\n.axis {\\n\\tfont-size: var(--ds-body-sm-font-size);\\n\\tdisplay: grid;\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-template-columns: fit-content(7em) 1fr;\\n\\tgrid-template-rows: 1fr auto;\\n\\tgrid-template-areas:\\n\\t\\t\\\"y-axis chart\\\"\\n\\t\\t\\\"y-axis x-axis\\\";\\n}\\n\\n.axis::before {\\n\\tborder-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\\n\\tborder-color: var(--mtdsc-chart-axis-edge-color);\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--mtdsc-chart-axis-edge-width)\\n\\t\\tvar(--mtdsc-chart-axis-edge-width);\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tpointer-events: none;\\n\\tz-index: 2;\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n.axisGroups {\\n\\t--gap: max(\\n\\t\\t1px,\\n\\t\\tclamp(\\n\\t\\t\\t.5%,\\n\\t\\t\\tcalc(10% / var(--bars) * var(--groups)),\\n\\t\\t\\tvar(--mtdsc-chart-axis-gap)\\n\\t\\t)\\n\\t);\\n\\tgap: var(--mtdsc-chart-axis-gap) var(--gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template-rows: subgrid;\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup {\\n\\tgrid-row: inherit;\\n\\tgrid-template: inherit;\\n}\\n.axisGroup::after {\\n\\tcontent: attr(data-label);\\n\\tdirection: ltr; /* Prevent inherited rtl */\\n\\tmin-width: 0; /* Allow word-wrapping */\\n}\\n:host(:not([data-variant|=\\\"bar\\\"])) {\\n\\t.axisGroup::after {\\n\\t\\tjustify-self: center;\\n\\t\\ttext-align: start;\\n\\t\\twriting-mode: vertical-rl;\\n\\t\\t/* If wanting 45deg text: */\\n\\t\\t/* justify-self: center;\\n\\t\\trotate: 45deg;\\n\\t\\ttext-align: end;\\n\\t\\twriting-mode: sideways-lr;\\n\\t\\ttransform-origin: 50% 0; */\\n\\t}\\n}\\n.axisSteps {\\n\\talign-items: end;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\talign-items: start;\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\theight: 1px;\\n\\ttext-align: right;\\n}\\n.axisStep::after {\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n\\tcontent: \\\"\\\";\\n}\\n.axisStep::before {\\n\\tcontent: attr(data-label);\\n\\ttranslate: 0 -50%;\\n}\\n.axisStep[data-label=\\\"0\\\"]::after {\\n\\topacity: 0; /* Hide 0 line as it overlapps with .axis::before */\\n}\\n\\n/* Reduce amount of steps if small space */\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-rows: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host([data-variant|=\\\"bar\\\"])\\n\\t.axisStepsXHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-columns: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroups {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgap: 1% var(--mtdsc-chart-axis-gap);\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: none / subgrid;\\n\\tpadding: var(--mtdsc-chart-axis-gap) 0;\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps {\\n\\talign-items: stretch;\\n\\taspect-ratio: auto;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep {\\n\\talign-items: stretch;\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n\\ttext-align: center;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"bar\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: row;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\talign-self: end;\\n\\tbackground: var(--color);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tborder-radius: var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0 0;\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\twidth: 100%;\\n}\\n.bar:focus-visible,\\n.linePoint:focus-visible {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .bar {\\n\\tborder-radius: 0 var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0;\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\talign-self: start;\\n}\\n\\n/* Prevent double border - using margin to see border around bars */\\n/* Prevent double border - using border to avoid affecting size */\\n:host(:not([data-variant])) .bar + .bar,\\n:host([data-variant=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-left: -1px;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar {\\n\\tborder-bottom: none;\\n}\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-top: -1px;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar {\\n\\tborder-left: none;\\n}\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n\\tgrid-row: chart;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups {\\n\\tpadding: 0;\\n}\\n\\n.line,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 1.5;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n\\n/* Ensure more contrast for line colors */\\n.line,\\n.linePoint,\\n:host:has(.linePoint) .legend::before {\\n\\tfilter: var(--_mtdsc-chart-line-filter);\\n}\\n\\n.linePoint {\\n\\t--size: var(--ds-size-2);\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint:focus-visible,\\n.linePoint:hover {\\n\\tscale: 1.3;\\n}\\n.linePoint::before {\\n\\tcontent: \\\"\\\";\\n\\tinset: calc(var(--ds-size-3) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n:host([data-dots=\\\"false\\\"]) .linePoint,\\n:host([data-dots=\\\"hidden\\\"]) .linePoint,\\n:host([data-dots=\\\"none\\\"]) .linePoint {\\n\\tbackground: none;\\n\\tborder: none;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--ds-size-2) var(--ds-size-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\theight: var(--ds-size-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-5);\\n}\\n\\n:host([data-legend=\\\"false\\\"]) .legends,\\n:host([data-legend=\\\"hidden\\\"]) .legends,\\n:host([data-legend=\\\"none\\\"]) .legends {\\n\\tdisplay: none;\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
package/mtds/chart/chart.d.ts CHANGED
@@ -10,9 +10,13 @@ declare global {
10
10
  }
11
11
  export type ChartProps = React.ComponentPropsWithoutRef<"div"> & {
12
12
  data?: (number | string)[][];
13
+ "data-legend"?: "none" | "hidden" | boolean;
14
+ "data-axis"?: "none" | "hidden" | boolean;
13
15
  "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie";
14
16
  };
15
17
  export declare const Chart: ReactTypes.ForwardRefExoticComponent<Omit<ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
16
18
  data?: (number | string)[][];
19
+ "data-legend"?: "none" | "hidden" | boolean;
20
+ "data-axis"?: "none" | "hidden" | boolean;
17
21
  "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie";
18
22
  } & ReactTypes.RefAttributes<HTMLDivElement>>;
package/mtds/chart/chart.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as r, jsxs as l } from "react/jsx-runtime";
2
- import { forwardRef as p } from "react";
3
- import { toCustomElementProps as d } from "../utils.js";
2
+ import { forwardRef as d } from "react";
3
+ import { toCustomElementProps as p } from "../utils.js";
4
4
  import "./chart-element.js";
5
- const x = p(function({ data: h, children: c, ...m }, n) {
6
- return /* @__PURE__ */ r("mtds-chart", { ref: n, ...d(m), children: h ? /* @__PURE__ */ l("table", { children: [
7
- /* @__PURE__ */ r("thead", { children: h.slice(0, 1).map((i, o) => /* @__PURE__ */ r("tr", { children: i.map((t, e) => /* @__PURE__ */ r("th", { children: t }, `${e}-${t}`)) }, `${o + 1}`)) }),
8
- /* @__PURE__ */ r("tbody", { children: h.slice(1).map((i, o) => /* @__PURE__ */ r("tr", { children: i.map(
9
- (t, e) => e ? /* @__PURE__ */ r("th", { children: t }, "th") : /* @__PURE__ */ r("td", { children: t }, `${e}-${t}`)
10
- ) }, `${o + 1}`)) })
11
- ] }) : c });
5
+ const x = d(function({ data: h, children: i, ...m }, n) {
6
+ return /* @__PURE__ */ r("mtds-chart", { ref: n, ...p(m), children: h ? /* @__PURE__ */ l("table", { children: [
7
+ /* @__PURE__ */ r("thead", { children: h.slice(0, 1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map((e, t) => /* @__PURE__ */ r("th", { children: e }, `${t + 1}`)) }, `${c + 1}`)) }),
8
+ /* @__PURE__ */ r("tbody", { children: h.slice(1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map(
9
+ (e, t) => t ? /* @__PURE__ */ r("td", { children: e }, `${t + 1}`) : /* @__PURE__ */ r("th", { children: e }, `${t + 1}`)
10
+ ) }, `${c + 1}`)) })
11
+ ] }) : i });
12
12
  });
13
13
  export {
14
14
  x as Chart
package/mtds/chart/chart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\t\t\t\tclass?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type ChartProps = React.ComponentPropsWithoutRef<\"div\"> & {\n\tdata?: (number | string)[][];\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nexport const Chart = forwardRef<HTMLDivElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) => (\n\t\t\t\t\t\t\t\t\t<th key={`${i}-${td}`}>{td}</th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? <th key=\"th\">{td}</th> : <td key={`${i}-${td}`}>{td}</td>,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["Chart","forwardRef","data","children","rest","ref","jsx","toCustomElementProps","jsxs","tr","row","td","i"],"mappings":";;;;AA4BO,MAAMA,IAAQC,EAAuC,SAC3D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,SACC,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,CAAI,GACjD,UAAAF,IACA,gBAAAM,EAAC,SAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAACO,GAAIC,MAC1B,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG,IAAI,CAACE,GAAIC,MACZ,gBAAAN,EAAC,MAAA,EAAuB,UAAAK,KAAf,GAAGC,CAAC,IAAID,CAAE,EAAQ,CAC3B,EAAA,GAHO,GAAGD,IAAM,CAAC,EAInB,CACA,GACF;AAAA,IACA,gBAAAJ,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,CAAC,EAAE,IAAI,CAACO,GAAIC,MACvB,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG;AAAA,MAAI,CAACE,GAAIC,MACZA,IAAI,gBAAAN,EAAC,QAAa,UAAAK,EAAA,GAAN,IAAS,IAAQ,gBAAAL,EAAC,QAAuB,UAAAK,EAAA,GAAf,GAAGC,CAAC,IAAID,CAAE,EAAQ;AAAA,IAAA,KAFjD,GAAGD,IAAM,CAAC,EAInB,CACA,EAAA,CACF;AAAA,EAAA,EAAA,CACD,IAEAP,GAEF;AAEF,CAAC;"}
1
+ {"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\t\t\t\tclass?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type ChartProps = React.ComponentPropsWithoutRef<\"div\"> & {\n\tdata?: (number | string)[][];\n\t\"data-legend\"?: \"none\" | \"hidden\" | boolean;\n\t\"data-axis\"?: \"none\" | \"hidden\" | boolean;\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nexport const Chart = forwardRef<HTMLDivElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) => (\n\t\t\t\t\t\t\t\t\t<th key={`${i + 1}`}>{td}</th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? (\n\t\t\t\t\t\t\t\t\t\t<td key={`${i + 1}`}>{td}</td>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<th key={`${i + 1}`}>{td}</th>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["Chart","forwardRef","data","children","rest","ref","jsx","toCustomElementProps","jsxs","tr","row","td","i"],"mappings":";;;;AA8BO,MAAMA,IAAQC,EAAuC,SAC3D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,SACC,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,CAAI,GACjD,UAAAF,IACA,gBAAAM,EAAC,SAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAACO,GAAIC,MAC1B,gBAAAJ,EAAC,MAAA,EACC,YAAG,IAAI,CAACK,GAAIC,MACZ,gBAAAN,EAAC,MAAA,EAAqB,UAAAK,EAAA,GAAb,GAAGC,IAAI,CAAC,EAAQ,CACzB,EAAA,GAHO,GAAGF,IAAM,CAAC,EAInB,CACA,GACF;AAAA,IACA,gBAAAJ,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,CAAC,EAAE,IAAI,CAACO,GAAIC,MACvB,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG;AAAA,MAAI,CAACE,GAAIC,MACZA,IACC,gBAAAN,EAAC,MAAA,EAAqB,eAAb,GAAGM,IAAI,CAAC,EAAQ,IAEzB,gBAAAN,EAAC,MAAA,EAAqB,eAAb,GAAGM,IAAI,CAAC,EAAQ;AAAA,IAAA,KALnB,GAAGF,IAAM,CAAC,EAQnB,CACA,EAAA,CACF;AAAA,EAAA,EAAA,CACD,IAEAP,GAEF;AAEF,CAAC;"}
package/mtds/chart/chart.stories.d.ts CHANGED
@@ -12,14 +12,16 @@ export default meta;
12
12
  type Story = StoryObj<typeof meta>;
13
13
  export declare const Default: Story;
14
14
  export declare const React: Story;
15
- export declare const Bar: Story;
16
- export declare const BarSingleDataset: Story;
17
- export declare const BarStacked: Story;
18
15
  export declare const Column: Story;
16
+ export declare const ColumnSingleDataset: Story;
19
17
  export declare const ColumnStacked: Story;
18
+ export declare const Bar: Story;
19
+ export declare const BarStacked: Story;
20
20
  export declare const Line: Story;
21
21
  export declare const Area: Story;
22
22
  export declare const Doughnut: Story;
23
23
  export declare const Pie: Story;
24
+ export declare const WithLegendDisabled: Story;
24
25
  export declare const WithCustomTooltips: Story;
26
+ export declare const WithDotsDisabled: Story;
25
27
  export declare const WithCustomInteractions: Story;