@aquera/nile-visualization 1.3.0 → 1.5.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.
@@ -8,6 +8,7 @@ export interface ChartGridConfigType {
8
8
  loading?: boolean;
9
9
  striped?: boolean;
10
10
  hoverable?: boolean;
11
+ stickyHeader?: boolean;
11
12
  emptyMessage?: string;
12
13
  loadingMessage?: string;
13
14
  noMatchMessage?: string;
@@ -333,6 +333,7 @@ let NileChart = class NileChart extends NileElement {
333
333
  >
334
334
  <nile-glyph name="smart-code" size="16"></nile-glyph>
335
335
  </button>
336
+ <slot name="ai-trigger-after"></slot>
336
337
  `;
337
338
  }
338
339
  renderHeader() {
@@ -392,7 +393,7 @@ let NileChart = class NileChart extends NileElement {
392
393
  return html `<nile-bar-chart
393
394
  .data=${config.data}
394
395
  .categories=${config.categories ?? []}
395
- .height=${config.height ?? '400px'}
396
+ .height=${config.height ?? '100%'}
396
397
  .yAxisTitle=${config.yAxisTitle ?? ''}
397
398
  .options=${mergedOptions}
398
399
  .loading=${config.loading ?? false}
@@ -401,7 +402,7 @@ let NileChart = class NileChart extends NileElement {
401
402
  return html `<nile-pie-chart
402
403
  .data=${config.data}
403
404
  .seriesName=${config.seriesName ?? ''}
404
- .height=${config.height ?? '400px'}
405
+ .height=${config.height ?? '100%'}
405
406
  .showDataLabels=${config.showDataLabels ?? true}
406
407
  .showLegend=${config.showLegend ?? true}
407
408
  .options=${mergedOptions}
@@ -411,7 +412,7 @@ let NileChart = class NileChart extends NileElement {
411
412
  return html `<nile-trendline-chart
412
413
  .data=${config.data}
413
414
  .categories=${config.categories ?? []}
414
- .height=${config.height ?? '400px'}
415
+ .height=${config.height ?? '100%'}
415
416
  .yAxisTitle=${config.yAxisTitle ?? ''}
416
417
  .forecast=${config.forecast ?? null}
417
418
  .options=${mergedOptions}
@@ -421,7 +422,7 @@ let NileChart = class NileChart extends NileElement {
421
422
  return html `<nile-anomaly-chart
422
423
  .data=${config.data}
423
424
  .categories=${config.categories ?? []}
424
- .height=${config.height ?? '400px'}
425
+ .height=${config.height ?? '100%'}
425
426
  .yAxisTitle=${config.yAxisTitle ?? ''}
426
427
  .anomaly=${config.anomaly ?? {}}
427
428
  .options=${mergedOptions}
@@ -431,7 +432,7 @@ let NileChart = class NileChart extends NileElement {
431
432
  return html `<nile-line-chart
432
433
  .data=${config.data}
433
434
  .categories=${config.categories ?? []}
434
- .height=${config.height ?? '400px'}
435
+ .height=${config.height ?? '100%'}
435
436
  .yAxisTitle=${config.yAxisTitle ?? ''}
436
437
  .options=${mergedOptions}
437
438
  .loading=${config.loading ?? false}
@@ -440,7 +441,7 @@ let NileChart = class NileChart extends NileElement {
440
441
  return html `<nile-area-chart
441
442
  .data=${config.data}
442
443
  .categories=${config.categories ?? []}
443
- .height=${config.height ?? '400px'}
444
+ .height=${config.height ?? '100%'}
444
445
  .yAxisTitle=${config.yAxisTitle ?? ''}
445
446
  .stacked=${config.stacked ?? false}
446
447
  .options=${mergedOptions}
@@ -450,7 +451,7 @@ let NileChart = class NileChart extends NileElement {
450
451
  return html `<nile-column-chart
451
452
  .data=${config.data}
452
453
  .categories=${config.categories ?? []}
453
- .height=${config.height ?? '400px'}
454
+ .height=${config.height ?? '100%'}
454
455
  .yAxisTitle=${config.yAxisTitle ?? ''}
455
456
  .options=${mergedOptions}
456
457
  .loading=${config.loading ?? false}
@@ -459,7 +460,7 @@ let NileChart = class NileChart extends NileElement {
459
460
  return html `<nile-donut-chart
460
461
  .data=${config.data}
461
462
  .seriesName=${config.seriesName ?? ''}
462
- .height=${config.height ?? '400px'}
463
+ .height=${config.height ?? '100%'}
463
464
  .innerSize=${config.innerSize ?? '50%'}
464
465
  .semiCircle=${config.semiCircle ?? false}
465
466
  .semiCircle=${config.semiCircle ?? false}
@@ -471,7 +472,7 @@ let NileChart = class NileChart extends NileElement {
471
472
  case 'scatter':
472
473
  return html `<nile-scatter-chart
473
474
  .data=${config.data}
474
- .height=${config.height ?? '400px'}
475
+ .height=${config.height ?? '100%'}
475
476
  .xAxisTitle=${config.xAxisTitle ?? ''}
476
477
  .yAxisTitle=${config.yAxisTitle ?? ''}
477
478
  .options=${mergedOptions}
@@ -480,7 +481,7 @@ let NileChart = class NileChart extends NileElement {
480
481
  case 'bubble':
481
482
  return html `<nile-bubble-chart
482
483
  .data=${config.data}
483
- .height=${config.height ?? '400px'}
484
+ .height=${config.height ?? '100%'}
484
485
  .xAxisTitle=${config.xAxisTitle ?? ''}
485
486
  .yAxisTitle=${config.yAxisTitle ?? ''}
486
487
  .options=${mergedOptions}
@@ -490,7 +491,7 @@ let NileChart = class NileChart extends NileElement {
490
491
  return html `<nile-spline-chart
491
492
  .data=${config.data}
492
493
  .categories=${config.categories ?? []}
493
- .height=${config.height ?? '400px'}
494
+ .height=${config.height ?? '100%'}
494
495
  .yAxisTitle=${config.yAxisTitle ?? ''}
495
496
  .options=${mergedOptions}
496
497
  .loading=${config.loading ?? false}
@@ -499,7 +500,7 @@ let NileChart = class NileChart extends NileElement {
499
500
  return html `<nile-radar-chart
500
501
  .data=${config.data}
501
502
  .categories=${config.categories ?? []}
502
- .height=${config.height ?? '400px'}
503
+ .height=${config.height ?? '100%'}
503
504
  .showArea=${config.showArea ?? false}
504
505
  .options=${mergedOptions}
505
506
  .loading=${config.loading ?? false}
@@ -511,14 +512,14 @@ let NileChart = class NileChart extends NileElement {
511
512
  .max=${config.max ?? 100}
512
513
  .suffix=${config.suffix ?? ''}
513
514
  .bands=${config.bands ?? []}
514
- .height=${config.height ?? '280px'}
515
+ .height=${config.height ?? '100%'}
515
516
  .options=${mergedOptions}
516
517
  .loading=${config.loading ?? false}
517
518
  ></nile-gauge-chart>`;
518
519
  case 'waterfall':
519
520
  return html `<nile-waterfall-chart
520
521
  .data=${config.data}
521
- .height=${config.height ?? '400px'}
522
+ .height=${config.height ?? '100%'}
522
523
  .yAxisTitle=${config.yAxisTitle ?? ''}
523
524
  .options=${mergedOptions}
524
525
  .loading=${config.loading ?? false}
@@ -530,7 +531,7 @@ let NileChart = class NileChart extends NileElement {
530
531
  .joinBy=${config.joinBy ?? ['hc-key', 'hc-key']}
531
532
  .seriesType=${config.seriesType ?? 'map'}
532
533
  .zoom=${config.zoom ?? true}
533
- .height=${config.height ?? '500px'}
534
+ .height=${config.height ?? '100%'}
534
535
  .options=${mergedOptions}
535
536
  .loading=${config.loading ?? false}
536
537
  ></nile-map-chart>`;
@@ -538,7 +539,7 @@ let NileChart = class NileChart extends NileElement {
538
539
  return html `<nile-stacked-chart
539
540
  .data=${config.data}
540
541
  .categories=${config.categories ?? []}
541
- .height=${config.height ?? '400px'}
542
+ .height=${config.height ?? '100%'}
542
543
  .yAxisTitle=${config.yAxisTitle ?? ''}
543
544
  .stackMode=${config.stackMode ?? 'normal'}
544
545
  .showLegend=${config.showLegend ?? true}
@@ -550,7 +551,7 @@ let NileChart = class NileChart extends NileElement {
550
551
  return html `<nile-cluster-chart
551
552
  .data=${config.data}
552
553
  .categories=${config.categories ?? []}
553
- .height=${config.height ?? '400px'}
554
+ .height=${config.height ?? '100%'}
554
555
  .yAxisTitle=${config.yAxisTitle ?? ''}
555
556
  .showLegend=${config.showLegend ?? true}
556
557
  .groupPadding=${config.groupPadding ?? 0.15}
@@ -561,7 +562,7 @@ let NileChart = class NileChart extends NileElement {
561
562
  case 'histogram':
562
563
  return html `<nile-histogram-chart
563
564
  .data=${config.data}
564
- .height=${config.height ?? '400px'}
565
+ .height=${config.height ?? '100%'}
565
566
  .xAxisTitle=${config.xAxisTitle ?? ''}
566
567
  .yAxisTitle=${config.yAxisTitle ?? ''}
567
568
  .histogramSeriesName=${config.histogramSeriesName ?? ''}
@@ -576,7 +577,7 @@ let NileChart = class NileChart extends NileElement {
576
577
  case 'bellcurve':
577
578
  return html `<nile-bellcurve-chart
578
579
  .data=${config.data}
579
- .height=${config.height ?? '400px'}
580
+ .height=${config.height ?? '100%'}
580
581
  .xAxisTitle=${config.xAxisTitle ?? ''}
581
582
  .yAxisTitle=${config.yAxisTitle ?? ''}
582
583
  .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
@@ -593,7 +594,7 @@ let NileChart = class NileChart extends NileElement {
593
594
  return html `<nile-boxplot-chart
594
595
  .data=${config.data}
595
596
  .categories=${config.categories ?? []}
596
- .height=${config.height ?? '400px'}
597
+ .height=${config.height ?? '100%'}
597
598
  .xAxisTitle=${config.xAxisTitle ?? ''}
598
599
  .yAxisTitle=${config.yAxisTitle ?? ''}
599
600
  .horizontal=${config.horizontal ?? false}
@@ -604,7 +605,7 @@ let NileChart = class NileChart extends NileElement {
604
605
  case 'timeline':
605
606
  return html `<nile-timeline-chart
606
607
  .data=${config.data}
607
- .height=${config.height ?? '400px'}
608
+ .height=${config.height ?? '100%'}
608
609
  .seriesName=${config.seriesName ?? ''}
609
610
  .datetimeAxis=${config.datetimeAxis ?? false}
610
611
  .inverted=${config.inverted ?? false}
@@ -616,7 +617,7 @@ let NileChart = class NileChart extends NileElement {
616
617
  case 'dumbbell':
617
618
  return html `<nile-dumbbell-chart
618
619
  .data=${config.data}
619
- .height=${config.height ?? '400px'}
620
+ .height=${config.height ?? '100%'}
620
621
  .yAxisTitle=${config.yAxisTitle ?? ''}
621
622
  .seriesName=${config.seriesName ?? ''}
622
623
  .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -629,7 +630,7 @@ let NileChart = class NileChart extends NileElement {
629
630
  case 'dumbbellLower':
630
631
  return html `<nile-dumbbell-lower-chart
631
632
  .data=${config.data}
632
- .height=${config.height ?? '400px'}
633
+ .height=${config.height ?? '100%'}
633
634
  .yAxisTitle=${config.yAxisTitle ?? ''}
634
635
  .seriesName=${config.seriesName ?? ''}
635
636
  .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -642,7 +643,7 @@ let NileChart = class NileChart extends NileElement {
642
643
  case 'dumbbellUpper':
643
644
  return html `<nile-dumbbell-upper-chart
644
645
  .data=${config.data}
645
- .height=${config.height ?? '400px'}
646
+ .height=${config.height ?? '100%'}
646
647
  .yAxisTitle=${config.yAxisTitle ?? ''}
647
648
  .seriesName=${config.seriesName ?? ''}
648
649
  .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -656,7 +657,7 @@ let NileChart = class NileChart extends NileElement {
656
657
  return html `<nile-fan-chart
657
658
  .lineData=${config.lineData}
658
659
  .bands=${config.bands}
659
- .height=${config.height ?? '400px'}
660
+ .height=${config.height ?? '100%'}
660
661
  .yAxisTitle=${config.yAxisTitle ?? ''}
661
662
  .lineSeriesName=${config.lineSeriesName ?? ''}
662
663
  .lineColor=${config.lineColor ?? '#1d4ed8'}
@@ -669,7 +670,7 @@ let NileChart = class NileChart extends NileElement {
669
670
  case 'funnel':
670
671
  return html `<nile-funnel-chart
671
672
  .data=${config.data}
672
- .height=${config.height ?? '400px'}
673
+ .height=${config.height ?? '100%'}
673
674
  .seriesName=${config.seriesName ?? ''}
674
675
  .showDataLabels=${config.showDataLabels ?? true}
675
676
  .options=${mergedOptions}
@@ -679,7 +680,7 @@ let NileChart = class NileChart extends NileElement {
679
680
  return html `<nile-organization-chart
680
681
  .nodes=${config.nodes}
681
682
  .links=${config.links}
682
- .height=${config.height ?? '480px'}
683
+ .height=${config.height ?? '100%'}
683
684
  .seriesName=${config.seriesName ?? ''}
684
685
  .inverted=${config.inverted ?? true}
685
686
  .options=${mergedOptions}
@@ -690,7 +691,7 @@ let NileChart = class NileChart extends NileElement {
690
691
  .categories=${config.categories}
691
692
  .columnSeries=${config.columnSeries}
692
693
  .lineSeries=${config.lineSeries}
693
- .height=${config.height ?? '400px'}
694
+ .height=${config.height ?? '100%'}
694
695
  .columnAxisTitle=${config.columnAxisTitle ?? ''}
695
696
  .lineAxisTitle=${config.lineAxisTitle ?? ''}
696
697
  .options=${mergedOptions}
@@ -701,7 +702,7 @@ let NileChart = class NileChart extends NileElement {
701
702
  .xCategories=${config.xCategories}
702
703
  .yCategories=${config.yCategories}
703
704
  .data=${config.data}
704
- .height=${config.height ?? '400px'}
705
+ .height=${config.height ?? '100%'}
705
706
  .seriesName=${config.seriesName ?? ''}
706
707
  .colorMin=${config.colorMin ?? null}
707
708
  .colorMax=${config.colorMax ?? null}
@@ -717,7 +718,7 @@ let NileChart = class NileChart extends NileElement {
717
718
  .layout=${config.layout ?? 'flame'}
718
719
  .data=${config.data ?? []}
719
720
  .sunburstData=${config.sunburstData ?? []}
720
- .height=${config.height ?? '480px'}
721
+ .height=${config.height ?? '100%'}
721
722
  .options=${mergedOptions}
722
723
  .loading=${config.loading ?? false}
723
724
  ></nile-flame-chart>`;
@@ -725,7 +726,7 @@ let NileChart = class NileChart extends NileElement {
725
726
  return html `<nile-spiderweb-chart
726
727
  .data=${config.data}
727
728
  .categories=${config.categories ?? []}
728
- .height=${config.height ?? '400px'}
729
+ .height=${config.height ?? '100%'}
729
730
  .showArea=${config.showArea ?? false}
730
731
  .options=${mergedOptions}
731
732
  .loading=${config.loading ?? false}
@@ -734,7 +735,7 @@ let NileChart = class NileChart extends NileElement {
734
735
  return html `<nile-inverted-area-chart
735
736
  .data=${config.data}
736
737
  .categories=${config.categories ?? []}
737
- .height=${config.height ?? '400px'}
738
+ .height=${config.height ?? '100%'}
738
739
  .yAxisTitle=${config.yAxisTitle ?? ''}
739
740
  .stacked=${config.stacked ?? false}
740
741
  .options=${mergedOptions}
@@ -744,7 +745,7 @@ let NileChart = class NileChart extends NileElement {
744
745
  return html `<nile-column-pyramid-chart
745
746
  .data=${config.data}
746
747
  .categories=${config.categories ?? []}
747
- .height=${config.height ?? '400px'}
748
+ .height=${config.height ?? '100%'}
748
749
  .options=${mergedOptions}
749
750
  .loading=${config.loading ?? false}
750
751
  ></nile-column-pyramid-chart>`;
@@ -752,7 +753,7 @@ let NileChart = class NileChart extends NileElement {
752
753
  return html `<nile-lollipop-chart
753
754
  .data=${config.data}
754
755
  .categories=${config.categories ?? []}
755
- .height=${config.height ?? '400px'}
756
+ .height=${config.height ?? '100%'}
756
757
  .options=${mergedOptions}
757
758
  .loading=${config.loading ?? false}
758
759
  ></nile-lollipop-chart>`;
@@ -760,7 +761,7 @@ let NileChart = class NileChart extends NileElement {
760
761
  return html `<nile-area-spline-chart
761
762
  .data=${config.data}
762
763
  .categories=${config.categories ?? []}
763
- .height=${config.height ?? '400px'}
764
+ .height=${config.height ?? '100%'}
764
765
  .yAxisTitle=${config.yAxisTitle ?? ''}
765
766
  .stacked=${config.stacked ?? false}
766
767
  .options=${mergedOptions}
@@ -770,7 +771,7 @@ let NileChart = class NileChart extends NileElement {
770
771
  return html `<nile-area-negative-chart
771
772
  .data=${config.data}
772
773
  .categories=${config.categories ?? []}
773
- .height=${config.height ?? '400px'}
774
+ .height=${config.height ?? '100%'}
774
775
  .yAxisTitle=${config.yAxisTitle ?? ''}
775
776
  .threshold=${config.threshold ?? 0}
776
777
  .options=${mergedOptions}
@@ -780,7 +781,7 @@ let NileChart = class NileChart extends NileElement {
780
781
  return html `<nile-area-range-chart
781
782
  .data=${config.data}
782
783
  .categories=${config.categories ?? []}
783
- .height=${config.height ?? '400px'}
784
+ .height=${config.height ?? '100%'}
784
785
  .yAxisTitle=${config.yAxisTitle ?? ''}
785
786
  .options=${mergedOptions}
786
787
  .loading=${config.loading ?? false}
@@ -789,7 +790,7 @@ let NileChart = class NileChart extends NileElement {
789
790
  return html `<nile-column-range-chart
790
791
  .data=${config.data}
791
792
  .categories=${config.categories ?? []}
792
- .height=${config.height ?? '400px'}
793
+ .height=${config.height ?? '100%'}
793
794
  .yAxisTitle=${config.yAxisTitle ?? ''}
794
795
  .options=${mergedOptions}
795
796
  .loading=${config.loading ?? false}
@@ -798,7 +799,7 @@ let NileChart = class NileChart extends NileElement {
798
799
  return html `<nile-column-drilldown-chart
799
800
  .data=${config.data}
800
801
  .drilldownSeries=${config.drilldownSeries}
801
- .height=${config.height ?? '400px'}
802
+ .height=${config.height ?? '100%'}
802
803
  .seriesName=${config.seriesName ?? ''}
803
804
  .yAxisTitle=${config.yAxisTitle ?? ''}
804
805
  .options=${mergedOptions}
@@ -808,7 +809,7 @@ let NileChart = class NileChart extends NileElement {
808
809
  return html `<nile-radial-bar-chart
809
810
  .data=${config.data}
810
811
  .categories=${config.categories}
811
- .height=${config.height ?? '400px'}
812
+ .height=${config.height ?? '100%'}
812
813
  .yAxisTitle=${config.yAxisTitle ?? ''}
813
814
  .innerSize=${config.innerSize ?? '28%'}
814
815
  .paneSize=${config.paneSize ?? '82%'}
@@ -818,7 +819,7 @@ let NileChart = class NileChart extends NileElement {
818
819
  case 'variablePie':
819
820
  return html `<nile-variable-pie-chart
820
821
  .data=${config.data}
821
- .height=${config.height ?? '400px'}
822
+ .height=${config.height ?? '100%'}
822
823
  .seriesName=${config.seriesName ?? ''}
823
824
  .showDataLabels=${config.showDataLabels ?? true}
824
825
  .showLegend=${config.showLegend ?? true}
@@ -828,14 +829,14 @@ let NileChart = class NileChart extends NileElement {
828
829
  case 'euler':
829
830
  return html `<nile-euler-chart
830
831
  .data=${config.data}
831
- .height=${config.height ?? '400px'}
832
+ .height=${config.height ?? '100%'}
832
833
  .options=${mergedOptions}
833
834
  .loading=${config.loading ?? false}
834
835
  ></nile-euler-chart>`;
835
836
  case 'polygon':
836
837
  return html `<nile-polygon-chart
837
838
  .series=${config.series}
838
- .height=${config.height ?? '400px'}
839
+ .height=${config.height ?? '100%'}
839
840
  .xAxisTitle=${config.xAxisTitle ?? ''}
840
841
  .yAxisTitle=${config.yAxisTitle ?? ''}
841
842
  .options=${mergedOptions}
@@ -844,7 +845,7 @@ let NileChart = class NileChart extends NileElement {
844
845
  case 'vector':
845
846
  return html `<nile-vector-chart
846
847
  .data=${config.data}
847
- .height=${config.height ?? '400px'}
848
+ .height=${config.height ?? '100%'}
848
849
  .seriesName=${config.seriesName ?? ''}
849
850
  .xAxisTitle=${config.xAxisTitle ?? ''}
850
851
  .yAxisTitle=${config.yAxisTitle ?? ''}
@@ -855,7 +856,7 @@ let NileChart = class NileChart extends NileElement {
855
856
  return html `<nile-xrange-chart
856
857
  .data=${config.data}
857
858
  .categories=${config.categories}
858
- .height=${config.height ?? '400px'}
859
+ .height=${config.height ?? '100%'}
859
860
  .seriesName=${config.seriesName ?? ''}
860
861
  .datetimeAxis=${config.datetimeAxis ?? false}
861
862
  .options=${mergedOptions}
@@ -896,8 +897,7 @@ let NileChart = class NileChart extends NileElement {
896
897
  case 'grid': {
897
898
  const gridChrome = '--nile-data-grid-radius:0;' +
898
899
  '--nile-data-grid-border-color:transparent;' +
899
- '--nile-data-grid-shadow:none;' +
900
- 'display:block;';
900
+ '--nile-data-grid-shadow:none;';
901
901
  const gridStyle = config.height
902
902
  ? `${gridChrome}height:${config.height};`
903
903
  : gridChrome;
@@ -908,6 +908,7 @@ let NileChart = class NileChart extends NileElement {
908
908
  .loading=${config.loading ?? false}
909
909
  .striped=${config.striped ?? false}
910
910
  .hoverable=${config.hoverable ?? false}
911
+ .stickyHeader=${config.stickyHeader ?? false}
911
912
  .emptyMessage=${config.emptyMessage ?? 'No data'}
912
913
  .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
913
914
  .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aquera/nile-visualization",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
4
4
  "description": "A visualization Library for the Nile Design System",
5
5
  "license": "MIT",
6
6
  "author": "Aquera Inc",
@@ -60,7 +60,7 @@
60
60
  },
61
61
  "peerDependencies": {
62
62
  "highcharts": ">=10.0.0",
63
- "@aquera/nile-data-grid": "0.1.0"
63
+ "@aquera/nile-data-grid": ">=0.1.0"
64
64
  },
65
65
  "peerDependenciesMeta": {
66
66
  "@aquera/nile-data-grid": {