@xplortech/apollo-data 0.0.4 → 0.0.6

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 (88) hide show
  1. package/README.md +15 -91
  2. package/dist/apollo-data/apollo-data.esm.js +1 -1
  3. package/dist/apollo-data/p-25841a73.entry.js +1 -0
  4. package/dist/apollo-data/p-2nuV5Vny.js +1 -0
  5. package/dist/apollo-data/p-839050b7.entry.js +1 -0
  6. package/dist/apollo-data/p-C2k3WBpi.js +11 -0
  7. package/dist/apollo-data/p-D64asVrg.js +2 -0
  8. package/dist/apollo-data/p-e2c3a317.entry.js +1 -0
  9. package/dist/cjs/apollo-data-bar-chart.cjs.entry.js +315 -0
  10. package/dist/{esm/apollo-data-bar-chart_2.entry.js → cjs/apollo-data-base-COGMOEqL.js} +9 -724
  11. package/dist/cjs/apollo-data-donut-chart.cjs.entry.js +408 -0
  12. package/dist/cjs/apollo-data-heat-map_4.cjs.entry.js +883 -0
  13. package/dist/cjs/apollo-data.cjs.js +3 -3
  14. package/dist/cjs/constants-B3weDEpc.js +5 -0
  15. package/dist/cjs/{index-Cl7HgRm0.js → index-Bd5risOy.js} +116 -63
  16. package/dist/cjs/loader.cjs.js +2 -2
  17. package/dist/collection/apollo-data-base.js +4 -8
  18. package/dist/collection/collection-manifest.json +7 -2
  19. package/dist/collection/components/apollo-data-bar/apollo-data-bar.js +8 -7
  20. package/dist/collection/components/apollo-data-bar/apollo-data-bar.stories.js +122 -0
  21. package/dist/collection/components/apollo-data-donut/apollo-data-donut.js +1 -1
  22. package/dist/collection/components/apollo-data-donut/apollo-data-donut.stories.js +132 -0
  23. package/dist/collection/components/apollo-data-heat-map/apollo-data-heat-map.js +208 -0
  24. package/dist/collection/components/apollo-data-heat-map/apollo-data-heat-map.stories.js +137 -0
  25. package/dist/collection/components/apollo-data-line/apollo-data-line.js +348 -0
  26. package/dist/collection/components/apollo-data-line/apollo-data-line.stories.js +122 -0
  27. package/dist/collection/components/apollo-data-scatter/apollo-data-scatter.js +329 -0
  28. package/dist/collection/components/apollo-data-scatter/apollo-data-scatter.stories.js +147 -0
  29. package/dist/collection/components/apollo-data-world-map/apollo-data-world-map.js +294 -0
  30. package/dist/collection/components/apollo-data-world-map/apollo-data-world-map.stories.js +126 -0
  31. package/dist/collection/examples/apollo-data-heat-map.examples.js +131 -0
  32. package/dist/collection/examples/apollo-data-line.examples.js +91 -0
  33. package/dist/collection/examples/apollo-data-scatter.examples.js +94 -0
  34. package/dist/collection/examples/apollo-data-world-map.examples.js +45 -0
  35. package/dist/collection/examples/index.js +3 -0
  36. package/dist/collection/utils/code-generator.js +1 -1
  37. package/dist/components/apollo-data-bar-chart.js +1 -1
  38. package/dist/components/apollo-data-donut-chart.js +1 -1
  39. package/dist/components/apollo-data-heat-map.d.ts +11 -0
  40. package/dist/components/apollo-data-heat-map.js +1 -0
  41. package/dist/components/apollo-data-line-chart.d.ts +11 -0
  42. package/dist/components/apollo-data-line-chart.js +1 -0
  43. package/dist/components/apollo-data-scatter-chart.d.ts +11 -0
  44. package/dist/components/apollo-data-scatter-chart.js +1 -0
  45. package/dist/components/apollo-data-world-map-chart.d.ts +11 -0
  46. package/dist/components/apollo-data-world-map-chart.js +1 -0
  47. package/dist/components/index.js +1 -1
  48. package/dist/components/p-2nuV5Vny.js +1 -0
  49. package/dist/components/p-CfbMSXKd.js +11 -0
  50. package/dist/components/p-gcjU8DVr.js +1 -0
  51. package/dist/esm/apollo-data-bar-chart.entry.js +313 -0
  52. package/dist/{cjs/apollo-data-bar-chart_2.cjs.entry.js → esm/apollo-data-base-C2k3WBpi.js} +8 -728
  53. package/dist/esm/apollo-data-donut-chart.entry.js +406 -0
  54. package/dist/esm/apollo-data-heat-map_4.entry.js +878 -0
  55. package/dist/esm/apollo-data.js +4 -4
  56. package/dist/esm/constants-2nuV5Vny.js +3 -0
  57. package/dist/esm/{index-Bb2nY-Tf.js → index-D64asVrg.js} +116 -63
  58. package/dist/esm/loader.js +3 -3
  59. package/dist/types/apollo-data-base.d.ts +2 -2
  60. package/dist/types/components/apollo-data-bar/apollo-data-bar.stories.d.ts +5 -0
  61. package/dist/types/components/apollo-data-donut/apollo-data-donut.stories.d.ts +5 -0
  62. package/dist/types/components/apollo-data-heat-map/apollo-data-heat-map.d.ts +140 -0
  63. package/dist/types/components/apollo-data-heat-map/apollo-data-heat-map.stories.d.ts +5 -0
  64. package/dist/types/components/apollo-data-line/apollo-data-line.d.ts +244 -0
  65. package/dist/types/components/apollo-data-line/apollo-data-line.stories.d.ts +5 -0
  66. package/dist/types/components/apollo-data-scatter/apollo-data-scatter.d.ts +327 -0
  67. package/dist/types/components/apollo-data-scatter/apollo-data-scatter.stories.d.ts +5 -0
  68. package/dist/types/components/apollo-data-world-map/apollo-data-world-map.d.ts +281 -0
  69. package/dist/types/components/apollo-data-world-map/apollo-data-world-map.stories.d.ts +5 -0
  70. package/dist/types/components.d.ts +210 -4
  71. package/dist/types/examples/apollo-data-heat-map.examples.d.ts +11 -0
  72. package/dist/types/examples/apollo-data-line.examples.d.ts +12 -0
  73. package/dist/types/examples/apollo-data-scatter.examples.d.ts +11 -0
  74. package/dist/types/examples/apollo-data-world-map.examples.d.ts +11 -0
  75. package/dist/types/examples/index.d.ts +3 -0
  76. package/dist/types/stencil-public-runtime.d.ts +23 -2
  77. package/dist/types/utils/code-generator.d.ts +1 -3
  78. package/package.json +8 -8
  79. package/src/examples/apollo-data-bar.examples.ts +157 -157
  80. package/src/examples/apollo-data-heat-map.examples.ts +147 -0
  81. package/src/examples/apollo-data-line.examples.ts +103 -0
  82. package/src/examples/apollo-data-scatter.examples.ts +109 -0
  83. package/src/examples/apollo-data-world-map.examples.ts +57 -0
  84. package/src/examples/index.ts +4 -1
  85. package/dist/apollo-data/p-Bb2nY-Tf.js +0 -2
  86. package/dist/apollo-data/p-e6584598.entry.js +0 -11
  87. package/dist/components/p-7XF5Cax8.js +0 -11
  88. package/dist/components/p-Dws5s-Xe.js +0 -1
@@ -1,7 +1,3 @@
1
- 'use strict';
2
-
3
- var index$2 = require('./index-Cl7HgRm0.js');
4
-
5
1
  // Note: This regex matches even invalid JSON strings, but since we’re
6
2
  // working on the output of `JSON.stringify` we know that only valid strings
7
3
  // are present (unless the user supplied a weird `options.indent` but in
@@ -22833,7 +22829,7 @@ var boundsStream$1 = {
22833
22829
  boundsStream$1.lineEnd = boundsLineEnd;
22834
22830
  if (areaRingSum$1 < 0) lambda0 = -(lambda1 = 180), phi0 = -(phi1 = 90);
22835
22831
  else if (deltaSum > epsilon$3) phi1 = 90;
22836
- else if (deltaSum < -1e-6) phi0 = -90;
22832
+ else if (deltaSum < -epsilon$3) phi0 = -90;
22837
22833
  range$4[0] = lambda0, range$4[1] = lambda1;
22838
22834
  },
22839
22835
  sphere: function() {
@@ -23434,7 +23430,7 @@ function polygonContains(polygon, point) {
23434
23430
  // from the point to the South pole. If it is zero, then the point is the
23435
23431
  // same side as the South pole.
23436
23432
 
23437
- return (angle < -1e-6 || angle < epsilon$3 && sum < -1e-12) ^ (winding & 1);
23433
+ return (angle < -epsilon$3 || angle < epsilon$3 && sum < -epsilon2) ^ (winding & 1);
23438
23434
  }
23439
23435
 
23440
23436
  function clip$1(pointVisible, clipLine, interpolate, start) {
@@ -23885,7 +23881,7 @@ function clipLine(a, b, x0, y0, x1, y1) {
23885
23881
  return true;
23886
23882
  }
23887
23883
 
23888
- var clipMax = 1e9, clipMin = -1e9;
23884
+ var clipMax = 1e9, clipMin = -clipMax;
23889
23885
 
23890
23886
  // TODO Use d3-polygon’s polygonContains here for the ring check?
23891
23887
  // TODO Eliminate duplicate buffering in clipBuffer and polygon.push?
@@ -67615,17 +67611,12 @@ async function _embed(el, spec, opts = {}, loader) {
67615
67611
  return { view, spec, vgSpec, finalize, embedOptions: opts };
67616
67612
  }
67617
67613
 
67618
- // @ts-ignore
67619
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
67620
67614
  class ApolloBase {
67621
- // @ts-ignore
67622
- getViewData(data, spec) {
67623
- throw new Error('getViewData is not implemented');
67624
- }
67625
67615
  async renderChart() {
67626
67616
  // Wait for shadow DOM to be ready
67627
- await new Promise(resolve => setTimeout(resolve, 0));
67628
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
67617
+ await new Promise(resolve => {
67618
+ setTimeout(resolve, 0);
67619
+ });
67629
67620
  const container = this.el?.shadowRoot?.querySelector('#container');
67630
67621
  if (!container) {
67631
67622
  return;
@@ -67637,6 +67628,7 @@ class ApolloBase {
67637
67628
  spec = typeof this.adSpec === 'string' ? JSON.parse(this.adSpec) : this.adSpec;
67638
67629
  }
67639
67630
  catch (err) {
67631
+ // eslint-disable-next-line no-console
67640
67632
  console.error('Error parsing data/spec', err);
67641
67633
  return;
67642
67634
  }
@@ -67653,716 +67645,4 @@ class ApolloBase {
67653
67645
  }
67654
67646
  }
67655
67647
 
67656
- const CHART_COLORS = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
67657
-
67658
- const FONT_FAMILY = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
67659
- const ApolloDataBarChart = class extends ApolloBase {
67660
- constructor(hostRef) {
67661
- super();
67662
- index$2.registerInstance(this, hostRef);
67663
- }
67664
- get el() { return index$2.getElement(this); }
67665
- adData = [];
67666
- adSpec = null;
67667
- static tooltipStylesInjected = false;
67668
- componentDidLoad() {
67669
- this.injectTooltipStyles();
67670
- }
67671
- async componentDidRender() {
67672
- await this.renderChart();
67673
- }
67674
- injectTooltipStyles() {
67675
- if (ApolloDataBarChart.tooltipStylesInjected) {
67676
- return;
67677
- }
67678
- const styleId = 'apollo-data-bar-tooltip-styles';
67679
- if (document.getElementById(styleId)) {
67680
- ApolloDataBarChart.tooltipStylesInjected = true;
67681
- return;
67682
- }
67683
- const style = document.createElement('style');
67684
- style.id = styleId;
67685
- style.textContent = `
67686
- #vg-tooltip-element {
67687
- background-color: #ffffff;
67688
- border: 1px solid #e1e2e8;
67689
- border-radius: 0.25rem;
67690
- box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);
67691
- font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
67692
- font-weight: 500;
67693
- padding: 0.25rem 0.75rem;
67694
- pointer-events: none;
67695
- text-align: center;
67696
- transform: translateY(20%);
67697
- white-space: pre;
67698
- z-index: 999999999;
67699
- }
67700
-
67701
- #vg-tooltip-element table tr td.key {
67702
- color: #6a6d7d;
67703
- text-align: center;
67704
- }
67705
-
67706
- #vg-tooltip-element table tr td.value {
67707
- text-align: center;
67708
- }
67709
-
67710
- #vg-tooltip-element.dark-theme {
67711
- background-color: #292632;
67712
- border: 1px solid #6a6d7d;
67713
- box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);
67714
- color: #ffffff;
67715
- }
67716
-
67717
- #vg-tooltip-element::after {
67718
- border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
67719
- border-style: solid;
67720
- border-width: 9px;
67721
- bottom: -17px;
67722
- content: '';
67723
- left: 50%;
67724
- position: absolute;
67725
- transform: translateX(-50%);
67726
- }
67727
- `;
67728
- document.head.appendChild(style);
67729
- ApolloDataBarChart.tooltipStylesInjected = true;
67730
- }
67731
- // @ts-ignore
67732
- async getViewData(data, spec) {
67733
- if (!spec) {
67734
- throw new Error('adSpec is required for apollo-data-bar-chart');
67735
- }
67736
- const { tooltipPrefix = '', currencySymbol = '' } = spec;
67737
- if (!data || data.length === 0) {
67738
- throw new Error('Data is required for apollo-data-bar-chart');
67739
- }
67740
- const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
67741
- const formatNumber = tooltipPrefix ? '.2f' : '.0f';
67742
- const currencyPrefix = tooltipPrefix ? currencySymbol : '';
67743
- return {
67744
- $schema: 'https://vega.github.io/schema/vega/v5.json',
67745
- config: {
67746
- text: {
67747
- fill: '#6a6d7d',
67748
- font: FONT_FAMILY,
67749
- labelFontSize: 12,
67750
- labelFontWeight: 400,
67751
- },
67752
- axis: {
67753
- labelColor: '#6a6d7d',
67754
- titleColor: '#6a6d7d',
67755
- labelFont: FONT_FAMILY,
67756
- titleFont: FONT_FAMILY,
67757
- titleFontWeight: 400,
67758
- },
67759
- legend: {
67760
- labelColor: '#6a6d7d',
67761
- titleColor: '#6a6d7d',
67762
- labelFont: FONT_FAMILY,
67763
- titleFont: FONT_FAMILY,
67764
- labelFontSize: 12,
67765
- labelLimit: 95,
67766
- },
67767
- title: {
67768
- color: '#6a6d7d',
67769
- font: FONT_FAMILY,
67770
- labelFontSize: 12,
67771
- labelFontWeight: 400,
67772
- },
67773
- },
67774
- height: 250,
67775
- autosize: { type: 'fit-x', contains: 'padding', resize: true },
67776
- signals: [
67777
- {
67778
- name: 'containerW',
67779
- update: 'max(containerSize()[0], 400)',
67780
- },
67781
- {
67782
- name: 'legendColumns',
67783
- update: 'ceil(containerW / 140)',
67784
- },
67785
- {
67786
- name: 'hoveredPeriod',
67787
- value: null,
67788
- on: [
67789
- { events: 'rect:mouseover', update: 'datum.period' },
67790
- { events: 'rect:mouseout', update: 'null' },
67791
- ],
67792
- },
67793
- ],
67794
- width: { signal: 'containerW' },
67795
- data: [
67796
- {
67797
- name: 'raw',
67798
- values: data,
67799
- },
67800
- {
67801
- name: 'periodTotals',
67802
- source: 'raw',
67803
- transform: [
67804
- {
67805
- type: 'aggregate',
67806
- groupby: ['periodId'],
67807
- fields: ['value'],
67808
- ops: ['sum'],
67809
- as: ['total'],
67810
- },
67811
- ],
67812
- },
67813
- {
67814
- name: 'table',
67815
- source: 'raw',
67816
- transform: [
67817
- {
67818
- type: 'lookup',
67819
- from: 'periodTotals',
67820
- key: 'periodId',
67821
- fields: ['periodId'],
67822
- values: ['total'],
67823
- as: ['total'],
67824
- },
67825
- {
67826
- type: 'stack',
67827
- groupby: ['periodId'],
67828
- sort: { field: 'category' },
67829
- field: 'value',
67830
- },
67831
- {
67832
- type: 'formula',
67833
- as: 'periodId',
67834
- expr: 'datum.periodId',
67835
- },
67836
- {
67837
- type: 'formula',
67838
- as: 'labelOnly',
67839
- expr: 'datum.label',
67840
- },
67841
- ],
67842
- },
67843
- {
67844
- name: 'periodLabels',
67845
- source: 'raw',
67846
- transform: [
67847
- {
67848
- type: 'aggregate',
67849
- groupby: ['periodId', 'label'],
67850
- },
67851
- ],
67852
- },
67853
- ],
67854
- scales: [
67855
- {
67856
- name: 'x',
67857
- type: 'band',
67858
- domain: { data: 'table', field: 'periodId' },
67859
- range: 'width',
67860
- paddingInner: 0.35,
67861
- paddingOuter: 0.02,
67862
- },
67863
- {
67864
- name: 'xLabels',
67865
- type: 'ordinal',
67866
- domain: { data: 'periodLabels', field: 'periodId' },
67867
- range: { data: 'periodLabels', field: 'label' },
67868
- },
67869
- {
67870
- name: 'y',
67871
- type: 'linear',
67872
- domain: { data: 'table', field: 'y1' },
67873
- nice: true,
67874
- zero: true,
67875
- range: 'height',
67876
- },
67877
- {
67878
- name: 'color',
67879
- type: 'ordinal',
67880
- domain: uniqueCategories,
67881
- range: spec?.colorSet ?? CHART_COLORS,
67882
- },
67883
- ],
67884
- axes: [
67885
- {
67886
- orient: 'bottom',
67887
- scale: 'x',
67888
- title: spec?.xAxisTitle,
67889
- labelPadding: 12,
67890
- titlePadding: 12,
67891
- labelAngle: -90,
67892
- labelAlign: 'right',
67893
- labelBaseline: 'middle',
67894
- tickSize: 3,
67895
- labelFontSize: 12,
67896
- titleFontSize: 14,
67897
- ticks: false,
67898
- domain: false,
67899
- encode: {
67900
- labels: {
67901
- update: {
67902
- text: { signal: "scale('xLabels', datum.value)" },
67903
- },
67904
- },
67905
- },
67906
- },
67907
- {
67908
- orient: 'left',
67909
- scale: 'y',
67910
- title: spec?.yAxisTitle || '',
67911
- format: ',.0f',
67912
- grid: true,
67913
- tickCount: 6,
67914
- labelFontSize: 12,
67915
- titleFontSize: 14,
67916
- ticks: false,
67917
- domain: false,
67918
- tickBand: 'extent',
67919
- labelPadding: 10,
67920
- },
67921
- ],
67922
- legends: [
67923
- {
67924
- fill: 'color',
67925
- orient: 'bottom',
67926
- direction: 'horizontal',
67927
- columns: { signal: 'legendColumns' },
67928
- title: null,
67929
- symbolType: 'square',
67930
- rowPadding: 8,
67931
- symbolOffset: -35,
67932
- symbolSize: 100,
67933
- labelOffset: 8,
67934
- labelLimit: 95,
67935
- },
67936
- ],
67937
- marks: [
67938
- {
67939
- type: 'rect',
67940
- from: { data: 'table' },
67941
- encode: {
67942
- enter: {
67943
- x: { scale: 'x', field: 'periodId' },
67944
- width: { scale: 'x', band: 1 },
67945
- y: { scale: 'y', field: 'y1' },
67946
- y2: { scale: 'y', field: 'y0' },
67947
- fill: { scale: 'color', field: 'category' },
67948
- tooltip: {
67949
- signal: `datum.category + ': ${currencyPrefix}' + format(datum.value, ',${formatNumber}') + '\\nTotal: ${currencyPrefix}' + format(datum.total, ',${formatNumber}')`,
67950
- },
67951
- },
67952
- update: {
67953
- opacity: [{ test: 'hoveredPeriod && datum.period !== hoveredPeriod', value: 0.2 }, { value: 1 }],
67954
- },
67955
- },
67956
- },
67957
- ],
67958
- };
67959
- }
67960
- render() {
67961
- return (index$2.h(index$2.Host, { key: '86ed2e74e5abd57e684a93bc9cf6a014b3ed081c' }, index$2.h("div", { key: '96e5f7dd2dfa6a104ca709d1399308a86041c2f3', id: "container", style: { width: '100%', height: '100%' } })));
67962
- }
67963
- };
67964
-
67965
- const ApolloDataDonutChart = class extends ApolloBase {
67966
- constructor(hostRef) {
67967
- super();
67968
- index$2.registerInstance(this, hostRef);
67969
- }
67970
- get el() { return index$2.getElement(this); }
67971
- /**
67972
- * Array of data items to display in the donut chart. Each item represents a segment with category and value.
67973
- * @property {string} category - Category name for the data segment
67974
- * @property {number} value - Numeric value for the donut chart segment
67975
- */
67976
- adData = [];
67977
- /**
67978
- * Optional specification object for customizing the chart appearance
67979
- * @property {string[]} [colorSet] - Array of color hex codes for chart segments
67980
- * @property {string} [preffix] - A string added at the start of another string, like $ or a currency symbol.
67981
- * @property {string} [suffix] - A string added at the end of another string, like %, kg or a currency symbol.
67982
- * @property {string} [centerText] - A label string rendered at the center of the view.
67983
- */
67984
- adSpec = {};
67985
- categories;
67986
- dataValues;
67987
- totalRevenue;
67988
- chartColors;
67989
- defaultChartColors = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
67990
- defaultCenterText = 'Total Revenue';
67991
- async componentDidRender() {
67992
- await this.renderChart();
67993
- }
67994
- // @ts-ignore
67995
- async getViewData(data, spec) {
67996
- const dataValues = data;
67997
- this.chartColors = spec?.colorSet ? spec.colorSet : this.defaultChartColors;
67998
- this.categories = dataValues.map(item => item.category);
67999
- this.dataValues = dataValues.map((item, index) => ({
68000
- ...item,
68001
- order: index + 1,
68002
- }));
68003
- this.totalRevenue = Math.round(dataValues.reduce((prev, curr) => prev + curr.value, 0) * 100) / 100;
68004
- return {
68005
- $schema: 'https://vega.github.io/schema/vega/v5.json',
68006
- description: "Donut chart with correctly placed percentage labels and exploded 'Other' slices on hover",
68007
- height: 250,
68008
- signals: [
68009
- {
68010
- name: 'containerW',
68011
- update: 'min(containerSize()[0], 400)',
68012
- },
68013
- { name: 'centerX', update: 'containerW / 2' },
68014
- { name: 'centerY', update: '250 / 2' },
68015
- { name: 'radius', update: 'min(containerW, 250) / 2 - 20' },
68016
- {
68017
- name: 'categoryDisplay',
68018
- value: null,
68019
- on: [
68020
- {
68021
- events: { type: 'mouseover', markname: 'mainArc' },
68022
- update: 'datum.category',
68023
- },
68024
- {
68025
- events: {
68026
- type: 'mouseover',
68027
- markname: 'mainArcLabel',
68028
- },
68029
- update: 'datum.category',
68030
- },
68031
- {
68032
- events: { type: 'mouseout', markname: 'mainArc' },
68033
- update: 'null',
68034
- },
68035
- {
68036
- events: {
68037
- type: 'mouseout',
68038
- markname: 'mainArcLabel',
68039
- },
68040
- update: 'null',
68041
- },
68042
- {
68043
- events: { type: 'mouseover', markname: 'innerArc' },
68044
- update: 'null',
68045
- },
68046
- {
68047
- events: { type: 'mouseover', markname: 'outerArc' },
68048
- update: 'null',
68049
- },
68050
- {
68051
- events: { type: 'mouseover', markname: 'otherArc' },
68052
- update: 'datum.category',
68053
- },
68054
- {
68055
- events: { type: 'mouseout', markname: 'otherArc' },
68056
- update: 'null',
68057
- },
68058
- ],
68059
- },
68060
- {
68061
- name: 'displayText',
68062
- update: `categoryDisplay && length(categoryDisplay) > 18 ? (lastindexof(categoryDisplay, ' ') > 0 ? slice(categoryDisplay, 0, lastindexof(categoryDisplay, ' ')) + '\\n' + slice(categoryDisplay, lastindexof(categoryDisplay, ' ') + 1) : categoryDisplay) : categoryDisplay || '${spec?.centerText ? spec.centerText : this.defaultCenterText}'`,
68063
- },
68064
- {
68065
- name: 'hoveredCategory',
68066
- value: null,
68067
- on: [
68068
- {
68069
- events: { type: 'mouseover', markname: 'mainArc' },
68070
- update: 'datum.category',
68071
- },
68072
- {
68073
- events: {
68074
- type: 'mouseover',
68075
- markname: 'mainArcLabel',
68076
- },
68077
- update: 'datum.category',
68078
- },
68079
- {
68080
- events: { type: 'mouseover', markname: 'outerArc' },
68081
- update: 'null',
68082
- },
68083
- {
68084
- events: { type: 'mouseover', markname: 'innerArc' },
68085
- update: 'null',
68086
- },
68087
- {
68088
- events: { type: 'mouseout', markname: 'innerArc' },
68089
- update: 'null',
68090
- },
68091
- ],
68092
- },
68093
- {
68094
- name: 'hoveredValue',
68095
- value: null,
68096
- on: [
68097
- {
68098
- events: { type: 'mouseover', markname: 'mainArc' },
68099
- update: 'datum.value',
68100
- },
68101
- {
68102
- events: {
68103
- type: 'mouseover',
68104
- markname: 'mainArcLabel',
68105
- },
68106
- update: 'datum.value',
68107
- },
68108
- {
68109
- events: { type: 'mouseout', markname: 'mainArc' },
68110
- update: 'null',
68111
- },
68112
- {
68113
- events: { type: 'mouseover', markname: 'otherArc' },
68114
- update: 'datum.value',
68115
- },
68116
- {
68117
- events: { type: 'mouseout', markname: 'otherArc' },
68118
- update: 'null',
68119
- },
68120
- ],
68121
- },
68122
- ],
68123
- width: { signal: 'containerW' },
68124
- data: [
68125
- {
68126
- name: 'table',
68127
- values: this.dataValues,
68128
- transform: [
68129
- {
68130
- type: 'joinaggregate',
68131
- fields: ['value'],
68132
- ops: ['sum'],
68133
- as: ['total'],
68134
- },
68135
- {
68136
- type: 'formula',
68137
- as: 'percent',
68138
- expr: 'datum.value / datum.total',
68139
- },
68140
- {
68141
- type: 'collect',
68142
- sort: { field: 'order', order: 'descending' },
68143
- },
68144
- {
68145
- type: 'pie',
68146
- field: 'value',
68147
- as: ['startAngle', 'endAngle'],
68148
- },
68149
- {
68150
- type: 'formula',
68151
- as: 'midAngle',
68152
- expr: '((datum.startAngle + datum.endAngle) + 9.418) / 2',
68153
- },
68154
- {
68155
- type: 'formula',
68156
- as: 'labelX',
68157
- expr: 'centerX + (radius * 1.2 * cos(datum.midAngle))',
68158
- },
68159
- {
68160
- type: 'formula',
68161
- as: 'labelY',
68162
- expr: 'centerY + (radius * 1.2 * sin(datum.midAngle))',
68163
- },
68164
- {
68165
- type: 'formula',
68166
- as: 'percentLabel',
68167
- expr: `format(datum.value / ${this.totalRevenue} * 100, '.1f') + '%'`,
68168
- },
68169
- ],
68170
- },
68171
- {
68172
- name: 'defaultCenterText',
68173
- values: [
68174
- {
68175
- category: spec?.centerText ? spec.centerText : this.defaultCenterText,
68176
- value: this.totalRevenue,
68177
- order: 4,
68178
- },
68179
- ],
68180
- transform: [
68181
- { type: 'filter', expr: 'hoveredCategory === null' },
68182
- {
68183
- type: 'formula',
68184
- as: 'textDisplay',
68185
- expr: `'${spec?.prefix ?? '$'}' + format(floor(datum.value), ',') + '${spec?.suffix ?? ''}' `,
68186
- },
68187
- ],
68188
- },
68189
- ],
68190
- scales: [
68191
- {
68192
- name: 'mainColor',
68193
- type: 'ordinal',
68194
- domain: this.categories,
68195
- range: this.chartColors,
68196
- },
68197
- ],
68198
- legends: [
68199
- {
68200
- fill: 'mainColor',
68201
- orient: 'bottom',
68202
- direction: 'horizontal',
68203
- columns: 2,
68204
- title: '',
68205
- padding: 10,
68206
- symbolType: 'square',
68207
- symbolSize: 100,
68208
- labelFontSize: 12,
68209
- labelColor: '#6A6D7D',
68210
- rowPadding: 8,
68211
- },
68212
- ],
68213
- marks: [
68214
- {
68215
- type: 'rule',
68216
- name: 'labelLines',
68217
- from: { data: 'table' },
68218
- encode: {
68219
- enter: {
68220
- stroke: { value: 'black' }, // line color
68221
- strokeWidth: { value: 1 },
68222
- x: {
68223
- signal: 'centerX + (radius * 0.9) * cos(datum.midAngle)',
68224
- },
68225
- y: {
68226
- signal: 'centerY + (radius * 0.9) * sin(datum.midAngle)',
68227
- },
68228
- x2: {
68229
- signal: 'datum.labelX - 12 * cos(datum.midAngle)', // <-- added offset
68230
- },
68231
- y2: {
68232
- signal: 'datum.labelY - 12 * sin(datum.midAngle)', // <-- added offset
68233
- },
68234
- },
68235
- update: {
68236
- opacity: { value: 1 },
68237
- },
68238
- },
68239
- zindex: 5,
68240
- },
68241
- {
68242
- type: 'arc',
68243
- name: 'mainArc',
68244
- from: { data: 'table' },
68245
- encode: {
68246
- enter: {
68247
- fill: { scale: 'mainColor', field: 'category' },
68248
- x: { signal: 'centerX' },
68249
- y: { signal: 'centerY' },
68250
- startAngle: { field: 'startAngle' },
68251
- endAngle: { field: 'endAngle' },
68252
- innerRadius: { signal: 'radius * 0.5' },
68253
- outerRadius: { signal: 'radius * 0.9' },
68254
- padAngle: { value: 0.03 },
68255
- cornerRadius: { value: 1 },
68256
- },
68257
- },
68258
- interactive: true,
68259
- },
68260
- {
68261
- type: 'arc',
68262
- name: 'innerArc',
68263
- from: { data: 'table' },
68264
- encode: {
68265
- enter: {
68266
- fill: { value: 'transparent' },
68267
- x: { signal: 'centerX' },
68268
- y: { signal: 'centerY' },
68269
- startAngle: { field: 'startAngle' },
68270
- endAngle: { field: 'endAngle' },
68271
- innerRadius: { signal: 'radius * 0.4' },
68272
- outerRadius: { signal: 'radius * 0.5' },
68273
- padAngle: { value: 0.03 },
68274
- cornerRadius: { value: 1 },
68275
- },
68276
- },
68277
- zindex: 1,
68278
- },
68279
- {
68280
- type: 'arc',
68281
- name: 'outerArc',
68282
- from: { data: 'table' },
68283
- encode: {
68284
- enter: {
68285
- fill: { value: 'transparent' },
68286
- x: { signal: 'centerX' },
68287
- y: { signal: 'centerY' },
68288
- startAngle: { field: 'startAngle' },
68289
- endAngle: { field: 'endAngle' },
68290
- innerRadius: { signal: 'radius * 0.91' },
68291
- outerRadius: { signal: 'radius * 1.30' },
68292
- },
68293
- },
68294
- zindex: 1,
68295
- },
68296
- {
68297
- type: 'text',
68298
- name: 'mainArcLabel',
68299
- from: { data: 'table' },
68300
- encode: {
68301
- enter: {
68302
- text: { field: 'percentLabel' },
68303
- align: { value: 'center' },
68304
- baseline: { value: 'middle' },
68305
- fill: { value: '#302D3B' },
68306
- fontSize: { value: 10 },
68307
- x: { field: 'labelX' },
68308
- y: { field: 'labelY' },
68309
- font: {
68310
- value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
68311
- },
68312
- fontWeight: 600,
68313
- },
68314
- },
68315
- },
68316
- {
68317
- type: 'text',
68318
- encode: {
68319
- enter: {
68320
- text: { value: '$850,000' },
68321
- x: { signal: 'centerX' },
68322
- y: { signal: 'centerY' },
68323
- align: { value: 'center' },
68324
- baseline: { value: 'middle' },
68325
- fontSize: { value: 16 },
68326
- fontWeight: { value: 'bold' },
68327
- fill: { value: '#302D3B' },
68328
- font: {
68329
- value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
68330
- },
68331
- },
68332
- update: {
68333
- text: {
68334
- signal: `hoveredValue ? '${spec?.prefix ?? '$'}' + format(floor(hoveredValue), ',') + '${spec?.suffix ?? ''}' : '${spec?.prefix ?? '$'}' + format(floor(${this.totalRevenue ?? 1}), ',') + '${spec?.suffix ?? ''}'`,
68335
- },
68336
- },
68337
- },
68338
- },
68339
- {
68340
- type: 'text',
68341
- encode: {
68342
- enter: {
68343
- x: { signal: 'centerX' },
68344
- y: { signal: 'centerY + 15' },
68345
- align: { value: 'center' },
68346
- baseline: { value: 'middle' },
68347
- fontSize: { value: 10 },
68348
- fill: { value: '#6A6D7D' },
68349
- font: {
68350
- value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
68351
- },
68352
- fontWeight: 400,
68353
- limit: { value: 100 },
68354
- lineBreak: { value: '\\n' },
68355
- },
68356
- update: { text: { signal: 'displayText' } },
68357
- },
68358
- },
68359
- ],
68360
- };
68361
- }
68362
- render() {
68363
- return (index$2.h(index$2.Host, { key: 'fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4' }, index$2.h("div", { key: 'fc08cdc3c0c0fda7f7c13149532eb61f511aa035', id: "container", style: { width: '100%', height: '100%' } })));
68364
- }
68365
- };
68366
-
68367
- exports.apollo_data_bar_chart = ApolloDataBarChart;
68368
- exports.apollo_data_donut_chart = ApolloDataDonutChart;
67648
+ export { ApolloBase as A };