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