fix(analytics-chart): remove fill prop [MA-2659]

fill is now controlled by the stacked prop BREAKING CHANGE: removed the fill prop from chart options
Kong · Mar 21, 2024 · ffeae7e · ffeae7e
1 parent abb96fa
commit ffeae7e
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 23 deletions.
diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
@@ -95,12 +95,6 @@
             :label="multiMetricToggle ? 'Multi Metric' : 'Single Metric'"
           />
         </div>
-        <div v-if="chartType.includes('Line')">
-          <KInputSwitch
-            v-model="fillToggle"
-            :label="fillToggle ? 'Fill' : 'No Fill'"
-          />
-        </div>
         <div>
           <KInputSwitch
             v-model="stackToggle"
@@ -271,7 +265,6 @@ interface MetricSelection {
 const appLinks: SandboxNavigationItem[] = inject('app-links', [])
 
 const multiMetricToggle = ref(false)
-const fillToggle = ref(true)
 const stackToggle = ref(true)
 const limitToggle = ref(false)
 const multiDimensionToggle = ref(false)
@@ -364,7 +357,6 @@ const analyticsChartOptions = computed<AnalyticsChartOptions>(() => {
   return {
     type: chartType.value,
     stacked: stackToggle.value,
-    fill: fillToggle.value,
     chartDatasetColors: colorPalette.value,
   }
 })

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -63,7 +63,7 @@
         :chart-tooltip-sort-fn="chartOptions.chartTooltipSortFn"
         :dataset-colors="chartOptions.chartDatasetColors"
         :dimension-axes-title="timestampAxisTitle"
-        :fill="chartOptions.fill"
+        :fill="chartOptions.stacked"
         :granularity="timeSeriesGranularity"
         :legend-values="legendValues"
         :metric-axes-title="metricAxesTitle"
@@ -94,7 +94,6 @@
         v-else-if="isDoughnutChart"
         :chart-data="computedChartData"
         :dataset-colors="chartOptions.chartDatasetColors"
-        :fill="chartOptions.fill"
         :legend-position="legendPosition"
         :legend-values="legendValues"
         :metric-unit="computedMetricUnit"
@@ -190,14 +189,14 @@ const computedChartData = computed(() => {
   return isTimeSeriesChart.value
     ? composables.useExploreResultToTimeDataset(
       {
-        fill: props.chartOptions.fill,
+        fill: props.chartOptions.stacked,
         colorPalette: props.chartOptions.chartDatasetColors || datavisPalette,
       },
       toRef(props, 'chartData'),
     ).value
     : composables.useExploreResultToDatasets(
       {
-        fill: props.chartOptions.fill,
+        fill: props.chartOptions.stacked,
         colorPalette: props.chartOptions.chartDatasetColors || datavisPalette,
       },
       toRef(props, 'chartData'),

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue
@@ -58,11 +58,6 @@ const props = defineProps({
     required: false,
     default: null,
   },
-  fill: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
   tooltipTitle: {
     type: String,
     required: true,

diff --git a/packages/analytics/analytics-chart/src/types/chart-data.ts b/packages/analytics/analytics-chart/src/types/chart-data.ts
@@ -59,12 +59,6 @@ export interface AnalyticsChartOptions {
    * Applies to timeseries charts as well as bar charts.
    */
   stacked?: boolean,
-  /**
-   * Apply fill to datasets.
-   * If true, fill the area under the line.
-   * Only applies to time series charts.
-   */
-  fill?: boolean,
   /**
    * Title to display for the metric axis
    * If not provided, show nothing