@shohojdhara/atomix 0.4.6 → 0.4.7

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 (28) hide show
  1. package/dist/atomix.css +37 -19
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +1 -1
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.d.ts +93 -109
  6. package/dist/charts.js +90 -187
  7. package/dist/charts.js.map +1 -1
  8. package/dist/index.d.ts +4 -21
  9. package/dist/index.esm.js +90 -188
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +93 -191
  12. package/dist/index.js.map +1 -1
  13. package/dist/index.min.js +1 -1
  14. package/dist/index.min.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/components/Chart/BubbleChart.tsx +6 -2
  17. package/src/components/Chart/Chart.stories.tsx +108 -96
  18. package/src/components/Chart/ChartToolbar.tsx +6 -4
  19. package/src/components/Chart/ChartTooltip.tsx +5 -4
  20. package/src/components/Chart/GaugeChart.tsx +20 -12
  21. package/src/components/Chart/HeatmapChart.tsx +53 -23
  22. package/src/components/Chart/TreemapChart.tsx +44 -15
  23. package/src/components/Chart/index.ts +0 -2
  24. package/src/components/Chart/types.ts +4 -4
  25. package/src/components/index.ts +0 -1
  26. package/src/styles/01-settings/_settings.chart.scss +13 -13
  27. package/src/styles/06-components/_components.chart.scss +23 -5
  28. package/src/components/Chart/AnimatedChart.tsx +0 -230
package/dist/atomix.css CHANGED
@@ -4231,6 +4231,8 @@ a, a:hover {
4231
4231
  .c-chart__data-point {
4232
4232
  cursor: pointer;
4233
4233
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4234
+ transform-origin: center;
4235
+ transform-box: fill-box;
4234
4236
  }
4235
4237
  .c-chart__data-point:hover {
4236
4238
  opacity: 0.8;
@@ -4278,21 +4280,23 @@ a, a:hover {
4278
4280
  opacity: 0.5;
4279
4281
  }
4280
4282
  .c-chart__treemap-node {
4281
- stroke: var(--atomix-border-color);
4282
- stroke-width: 1;
4283
+ stroke: transparent;
4284
+ stroke-width: 0;
4283
4285
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4284
4286
  cursor: pointer;
4285
4287
  shape-rendering: geometricPrecision;
4288
+ transform-origin: center;
4289
+ transform-box: fill-box;
4286
4290
  }
4287
4291
  .c-chart__treemap-node:hover {
4288
4292
  transform: scale(1.02);
4289
4293
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
4290
- stroke-width: 1.5;
4294
+ stroke-width: 0;
4291
4295
  }
4292
4296
  .c-chart__treemap-node--hovered {
4293
4297
  transform: scale(1.02);
4294
4298
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
4295
- stroke-width: 1.5;
4299
+ stroke-width: 0;
4296
4300
  }
4297
4301
  .c-chart__treemap-node--selected {
4298
4302
  stroke: var(--atomix-primary-border-subtle);
@@ -4307,7 +4311,7 @@ a, a:hover {
4307
4311
  .c-chart__treemap-label {
4308
4312
  font-size: 0.875rem;
4309
4313
  font-weight: 500;
4310
- fill: var(--atomix-text-primary);
4314
+ fill: var(--atomix-invert-text-emphasis);
4311
4315
  text-anchor: middle;
4312
4316
  dominant-baseline: middle;
4313
4317
  pointer-events: none;
@@ -4319,13 +4323,14 @@ a, a:hover {
4319
4323
  .c-chart__funnel-segment {
4320
4324
  stroke: var(--atomix-border-color);
4321
4325
  stroke-width: 1;
4322
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4326
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4323
4327
  cursor: pointer;
4324
4328
  shape-rendering: geometricPrecision;
4329
+ transform-origin: center;
4325
4330
  }
4326
4331
  .c-chart__funnel-segment:hover {
4327
- opacity: 0.9;
4328
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
4332
+ opacity: 1;
4333
+ filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.175)) brightness(1.1);
4329
4334
  stroke-width: 1.5;
4330
4335
  }
4331
4336
  .c-chart__funnel-segment:focus-visible {
@@ -4343,11 +4348,11 @@ a, a:hover {
4343
4348
  -webkit-user-select: none;
4344
4349
  -moz-user-select: none;
4345
4350
  user-select: none;
4346
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
4351
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
4347
4352
  }
4348
4353
  .c-chart__funnel-conversion {
4349
- font-size: 0.75rem;
4350
- font-weight: 600;
4354
+ font-size: 0.875rem;
4355
+ font-weight: 700;
4351
4356
  fill: var(--atomix-secondary-text-emphasis);
4352
4357
  text-anchor: middle;
4353
4358
  dominant-baseline: middle;
@@ -4355,27 +4360,29 @@ a, a:hover {
4355
4360
  -webkit-user-select: none;
4356
4361
  -moz-user-select: none;
4357
4362
  user-select: none;
4358
- opacity: 0.8;
4363
+ opacity: 0.9;
4364
+ letter-spacing: 0.05em;
4365
+ text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
4359
4366
  }
4360
4367
  .c-chart__heatmap-cell {
4361
- stroke: var(--atomix-border-color);
4362
- stroke-width: 1;
4368
+ stroke: transparent;
4369
+ stroke-width: 0;
4363
4370
  rx: 0.25rem;
4364
4371
  ry: 0.25rem;
4365
4372
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4366
4373
  cursor: pointer;
4367
4374
  shape-rendering: geometricPrecision;
4375
+ transform-origin: center;
4376
+ transform-box: fill-box;
4368
4377
  }
4369
4378
  .c-chart__heatmap-cell:hover {
4370
4379
  transform: scale(1.05);
4371
- transform-origin: center;
4372
4380
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
4373
4381
  stroke-width: 2;
4374
4382
  z-index: 10;
4375
4383
  }
4376
4384
  .c-chart__heatmap-cell--hovered {
4377
4385
  transform: scale(1.05);
4378
- transform-origin: center;
4379
4386
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
4380
4387
  stroke-width: 2;
4381
4388
  z-index: 10;
@@ -4388,7 +4395,7 @@ a, a:hover {
4388
4395
  .c-chart__heatmap-label {
4389
4396
  font-size: 0.75rem;
4390
4397
  font-weight: 400;
4391
- fill: var(--atomix-text-primary);
4398
+ fill: var(--atomix-invert-text-emphasis);
4392
4399
  text-anchor: middle;
4393
4400
  dominant-baseline: middle;
4394
4401
  pointer-events: none;
@@ -4516,6 +4523,8 @@ a, a:hover {
4516
4523
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4517
4524
  cursor: pointer;
4518
4525
  shape-rendering: geometricPrecision;
4526
+ transform-origin: center;
4527
+ transform-box: fill-box;
4519
4528
  }
4520
4529
  .c-chart__area-point:hover {
4521
4530
  transform: scale(1.2);
@@ -4572,6 +4581,7 @@ a, a:hover {
4572
4581
  cursor: pointer;
4573
4582
  shape-rendering: geometricPrecision;
4574
4583
  transform-origin: center;
4584
+ transform-box: fill-box;
4575
4585
  }
4576
4586
  .c-chart__donut-slice:hover {
4577
4587
  transform: scale(1.02);
@@ -4635,6 +4645,8 @@ a, a:hover {
4635
4645
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4636
4646
  cursor: pointer;
4637
4647
  shape-rendering: geometricPrecision;
4648
+ transform-origin: center;
4649
+ transform-box: fill-box;
4638
4650
  }
4639
4651
  .c-chart__scatter-point:hover {
4640
4652
  transform: scale(1.2);
@@ -4659,6 +4671,8 @@ a, a:hover {
4659
4671
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4660
4672
  cursor: pointer;
4661
4673
  shape-rendering: geometricPrecision;
4674
+ transform-origin: center;
4675
+ transform-box: fill-box;
4662
4676
  }
4663
4677
  .c-chart__bubble:hover {
4664
4678
  transform: scale(1.1);
@@ -4716,6 +4730,8 @@ a, a:hover {
4716
4730
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4717
4731
  cursor: pointer;
4718
4732
  shape-rendering: geometricPrecision;
4733
+ transform-origin: center;
4734
+ transform-box: fill-box;
4719
4735
  }
4720
4736
  .c-chart__radar-point:hover {
4721
4737
  transform: scale(1.3);
@@ -4783,6 +4799,8 @@ a, a:hover {
4783
4799
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4784
4800
  cursor: pointer;
4785
4801
  shape-rendering: geometricPrecision;
4802
+ transform-origin: center;
4803
+ transform-box: fill-box;
4786
4804
  }
4787
4805
  .c-chart__waterfall-cumulative-point:hover {
4788
4806
  transform: scale(1.3);
@@ -4824,7 +4842,7 @@ a, a:hover {
4824
4842
  opacity: 1;
4825
4843
  }
4826
4844
  .c-chart__treemap-node {
4827
- stroke-width: 2;
4845
+ stroke-width: 0;
4828
4846
  }
4829
4847
  .c-chart__treemap-node--selected {
4830
4848
  stroke-width: 3;
@@ -4839,7 +4857,7 @@ a, a:hover {
4839
4857
  outline-width: calc(var(--atomix-border-width) * 3);
4840
4858
  }
4841
4859
  .c-chart__heatmap-cell {
4842
- stroke-width: 2;
4860
+ stroke-width: 0;
4843
4861
  }
4844
4862
  .c-chart__heatmap-cell--hovered {
4845
4863
  stroke-width: 3;