fix: resolve conflicts

package.json

@@ -21,16 +21,16 @@
   "devDependencies": {
     "@babel/types": "^7.24.0",
     "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@commitlint/config-conventional": "^18.6.3",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
-    "@evilmartians/lefthook": "^1.6.5",
+    "@evilmartians/lefthook": "^1.6.7",
     "@kong/design-tokens": "1.12.10",
     "@kong/kongponents": "9.0.0-alpha.121",
     "@rushstack/eslint-patch": "^1.7.2",
     "@types/flat": "^5.0.5",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^18.19.22",
+    "@types/node": "^18.19.24",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -39,7 +39,7 @@
     "@vitest/ui": "^1.3.1",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "c8": "^9.1.0",
     "commitizen": "^4.3.0",
@@ -57,7 +57,7 @@
     "lerna": "^8.1.2",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.35",
-    "postcss-custom-properties": "^13.3.5",
+    "postcss-custom-properties": "^13.3.6",
     "postcss-html": "^1.6.0",
     "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.12.0",
@@ -70,13 +70,13 @@
     "ts-node": "^10.9.2",
     "tsc-alias": "^1.8.8",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.11",
+    "typedoc": "^0.25.12",
     "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "~5.3.3",
     "uuid": "^9.0.1",
-    "vite": "^5.1.5",
+    "vite": "^5.1.6",
     "vite-plugin-externals": "^0.6.2",
-    "vite-plugin-vue-devtools": "^7.0.16",
+    "vite-plugin-vue-devtools": "^7.0.17",
     "vitest": "^1.3.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",

packages/analytics/analytics-chart/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-21)
+
+
+### Bug Fixes
+
+* **analytics-chart:** remove fill prop [MA-2659] ([#1280](https://github.com/Kong/public-ui-components/issues/1280)) ([b24f07d](https://github.com/Kong/public-ui-components/commit/b24f07d6e230116c619e690b35d030cfbfb37bd9))
+
+
+### BREAKING CHANGES
+
+* **analytics-chart:** removed the fill prop from chart options
+
+* fix: no need to pass fill to chart options anymore in dashboard renderer
+
+
+
+
+
 ## [2.5.5](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-21)
 
 **Note:** Version bump only for package @kong-ui-public/analytics-chart

packages/analytics/analytics-chart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/analytics-chart",
-  "version": "2.5.5",
+  "version": "3.0.0",
   "type": "module",
   "main": "./dist/vitals-chart.umd.js",
   "module": "./dist/vitals-chart.es.js",

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,
   }
 })

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'),

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,

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

packages/analytics/dashboard-renderer/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-22)
+
+
+### Features
+
+* **dashboard:** allow rows to fit content [MA-2744] ([#1284](https://github.com/Kong/public-ui-components/issues/1284)) ([5fca230](https://github.com/Kong/public-ui-components/commit/5fca230ab61736e964d92272fbcbffd06c0b7e82))
+
+
+
+
+
+## [0.16.1](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-22)
+
+**Note:** Version bump only for package @kong-ui-public/dashboard-renderer
+
+
+
+
+
+# [0.16.0](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-21)
+
+
+### Bug Fixes
+
+* **analytics-chart:** remove fill prop [MA-2659] ([#1280](https://github.com/Kong/public-ui-components/issues/1280)) ([b24f07d](https://github.com/Kong/public-ui-components/commit/b24f07d6e230116c619e690b35d030cfbfb37bd9))
+
+
+### BREAKING CHANGES
+
+* **analytics-chart:** removed the fill prop from chart options
+
+* fix: no need to pass fill to chart options anymore in dashboard renderer
+
+
+
+
+
 ## [0.15.4](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-03-21)
 
 **Note:** Version bump only for package @kong-ui-public/dashboard-renderer

packages/analytics/dashboard-renderer/README.md

@@ -32,7 +32,7 @@ This component only takes two properties:
 - [context](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts) : The time range that the dashboard should query and any additional filters that should be applied.
 - [config](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts) : The dashboard config and layout.
 
-For context `filters` and `timeSpec` see [here](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-utilities/src/types/explore-v4.ts)
+For context `filters` and `timeSpec` see [here](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-utilities/src/types/explore-v4.ts).
 
 ### Example
 
@@ -120,7 +120,7 @@ const config: DashboardConfig = {
 }
 ```
 
-### Example with slotted content
+#### Slotted content
 
 ```html
 <DashboardRenderer
@@ -205,4 +205,75 @@ const config: DashboardConfig = {
     },
   ],
 }
+```
+
+#### Auto-fit row content
+
+This example will create a dynamically-sized row that fits to its content rather than being fixed at the configured row height.  Note that this works because each chart is only rendered in 1 row; if a chart has `fitToContent` and `layout.size.rows > 1`, the `fitToContent` setting will be ignored.
+
+Rendering `AnalyticsChart` components (e.g., horizontal bar, vertical bar, timeseries charts) with dynamic row heights may lead to undefined behavior.  This option is best used with non-canvas charts (e.g., TopN charts).
+
+```typescript
+import type { DashboardRendererContext, DashboardConfig } from '@kong-ui-public/dashboard-renderer'
+import { DashboardRenderer, ChartTypes } from '@kong-ui-public/dashboard-renderer'
+
+const context: DashboardRendererContext = {
+  filters: [],
+  timeSpec: {
+    type: 'relative',
+    time_range: '15M',
+  },
+}
+
+const config: DashboardConfig = {
+  // 4 x 1 grid
+  gridSize: {
+    cols: 4,
+    rows: 1,
+  }
+  tiles: [
+    {
+      definition: {
+        chart: {
+          type: ChartTypes.TopN,
+          chartTitle: 'Top N chart of mock data',
+          description: 'Description'
+        },
+        query: {},
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 1,
+          fitToContent: true,
+        },
+      },
+    },
+    {
+      definition: {
+        chart: {
+          type: ChartTypes.TopN,
+          chartTitle: 'Top N chart of mock data',
+          description: 'Description',
+        },
+        query: {},
+      },
+      layout: {
+        position: {
+          col: 3,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 1,
+          fitToContent: true,
+        },
+      },
+    },
+  ],
+}
 ```

packages/analytics/dashboard-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/dashboard-renderer",
-  "version": "0.15.4",
+  "version": "0.17.0",
   "type": "module",
   "main": "./dist/dashboard-renderer.umd.js",
   "module": "./dist/dashboard-renderer.es.js",