@adminforth/dashboard 1.3.0 → 1.4.1

package/custom/widgets/{table/TableWidget.vue → TableWidget.vue}

@@ -112,14 +112,14 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
-import { getFieldRefField } from '../../model/dashboard.types.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../../model/dashboard.types.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
+import { getFieldRefField } from '../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../model/dashboard.types.js'
 
 type TableWidgetConfig = {
   columns?: FieldRef[]
   pagination?: boolean
-  pageSize?: number
+  page_size?: number
 }
 
 const DEFAULT_PAGE_SIZE = 10
@@ -133,7 +133,7 @@ const currentPage = ref(1)
 const currentPageInput = ref(1)
 const tableConfig = computed(() => props.widget.table as TableWidgetConfig | undefined)
 const isPaginationEnabled = computed(() => tableConfig.value?.pagination !== false)
-const pageSize = computed(() => tableConfig.value?.pageSize ?? DEFAULT_PAGE_SIZE)
+const pageSize = computed(() => tableConfig.value?.page_size ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
 const widgetDataRequest = computed(() => (

package/custom/widgets/chart/{bar/BarChart.vue → BarChart.vue}

@@ -82,7 +82,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -90,7 +90,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]

package/custom/widgets/chart/ChartWidget.vue

@@ -41,16 +41,7 @@
     />
 
     <BarChart
-      v-else-if="chartConfig?.type === 'bar'"
-      :rows="barRows"
-      :label-field="barLabelField"
-      :value-field="barValueField"
-      :color="chartConfig.color"
-      :height="chartHeight"
-    />
-
-    <HistogramChart
-      v-else-if="chartConfig?.type === 'histogram'"
+      v-else-if="chartConfig?.type === 'bar' || chartConfig?.type === 'histogram'"
       :rows="barRows"
       :label-field="barLabelField"
       :value-field="barValueField"
@@ -69,10 +60,10 @@
 
     <StackedBarChart
       v-else-if="chartConfig?.type === 'stacked_bar'"
-      :rows="rows"
+      :rows="stackedBarRows"
       :x-field="xField"
-      :y-field="yField"
-      :series-field="seriesField"
+      :y-field="stackedBarYField"
+      :series-field="stackedBarSeriesField"
       :colors="chartConfig.colors"
       :height="chartHeight"
     />
@@ -91,11 +82,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
-import { normalizeChartWidgetConfig } from './chart.types.js'
+import type { ChartDashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import BarChart from './bar/BarChart.vue'
 import FunnelChart from './funnel/FunnelChart.vue'
-import HistogramChart from './histogram/HistogramChart.vue'
 import LineChart from './line/LineChart.vue'
 import PieChart from './pie/PieChart.vue'
 import StackedBarChart from './stacked-bar/StackedBarChart.vue'
@@ -105,7 +94,7 @@ const DEFAULT_WIDGET_HEIGHT = 500
 
 const props = defineProps<{
   dashboardSlug: string
-  widget: DashboardWidgetConfig
+  widget: ChartDashboardWidgetConfig
 }>()
 
 const dashboardSlugRef = computed(() => props.dashboardSlug)
@@ -128,7 +117,7 @@ watch(
 const chartData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const rows = computed(() => chartData.value?.rows ?? [])
 const columns = computed(() => chartData.value?.columns ?? [])
-const chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+const chartConfig = computed(() => props.widget.chart)
 
 function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
   const resolvedField = field ?? fallbackField
@@ -155,6 +144,21 @@ const valueField = computed(() => chartConfig.value?.value?.field || columns.val
 const pieRows = computed(() => rows.value)
 const pieLabelField = computed(() => labelField.value)
 const pieValueField = computed(() => valueField.value)
+const stackedBarYItems = computed(() => {
+  const y = chartConfig.value?.y
+  return Array.isArray(y) ? y : []
+})
+const stackedBarRows = computed(() => {
+  if (chartConfig.value?.type !== 'stacked_bar' || !stackedBarYItems.value.length) {
+    return rows.value
+  }
+
+  return rows.value.flatMap((row) => stackedBarYItems.value.map((item) => ({
+    [xField.value]: row[xField.value],
+    __series: item.label ?? item.field,
+    __value: row[item.field],
+  })))
+})
 const barRows = computed(() => {
   const bucketField = chartConfig.value?.type === 'histogram'
     ? chartConfig.value.x?.field
@@ -178,6 +182,8 @@ const barRows = computed(() => {
 const barLabelField = computed(() => chartConfig.value?.type === 'histogram' && chartConfig.value.buckets ? 'label' : xField.value)
 const barValueField = computed(() => chartConfig.value?.type === 'histogram' && chartConfig.value.buckets ? 'count' : yField.value)
 const seriesField = computed(() => chartConfig.value?.series?.field || columns.value[2] || '')
+const stackedBarYField = computed(() => stackedBarYItems.value.length ? '__value' : yField.value)
+const stackedBarSeriesField = computed(() => stackedBarYItems.value.length ? '__series' : seriesField.value)
 const lineSeriesName = computed(() => {
   const y = chartConfig.value?.y
   return Array.isArray(y) ? y[0]?.label : undefined

package/{dist/custom/widgets/chart/funnel → custom/widgets/chart}/FunnelChart.vue

@@ -1,13 +1,91 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
+    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
+  >
+    <div
+      ref="svgEl"
+      class="min-h-0 w-full overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="valueField"
+      >
+        <path
+          v-for="segment in segments"
+          :key="segment.id"
+          :d="segment.path"
+          :fill="segment.color"
+          fill-opacity="0.9"
+        >
+          <title>
+            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
+          </title>
+        </path>
+
+        <text
+          v-for="segment in segments"
+          v-show="segment.labelVisible"
+          :key="`value-${segment.id}`"
+          :x="chartWidth / 2"
+          :y="segment.centerY + 4"
+          fill="#ffffff"
+          font-size="12"
+          font-weight="600"
+          text-anchor="middle"
+        >
+          {{ formatChartValue(segment.value) }}
+        </text>
+      </svg>
+    </div>
+
+    <div class="grid min-w-0 gap-2 text-sm">
+      <div
+        v-for="segment in segments"
+        :key="`legend-${segment.id}`"
+        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <span
+            class="h-2.5 w-2.5 shrink-0 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />
+
+          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
+            {{ segment.shortLabel }}
+          </span>
+        </div>
+
+        <div class="text-right">
+          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
+            {{ formatChartValue(segment.value) }}
+          </div>
+
+          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
+            {{ segment.percentLabel }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
   formatChartLabel,
   formatChartValue,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -121,79 +199,3 @@ const segments = computed(() => funnelRows.value.map((row, index) => {
   }
 }))
 </script>
-
-<template>
-  <div
-    ref="rootEl"
-    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
-    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
-  >
-    <div
-      ref="svgEl"
-      class="min-h-0 w-full overflow-hidden"
-    >
-      <svg
-        v-if="chartWidth > 0 && chartHeight > 0"
-        class="block h-full w-full"
-        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
-        role="img"
-        :aria-label="valueField"
-      >
-        <path
-          v-for="segment in segments"
-          :key="segment.id"
-          :d="segment.path"
-          :fill="segment.color"
-          fill-opacity="0.9"
-        >
-          <title>
-            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
-          </title>
-        </path>
-
-        <text
-          v-for="segment in segments"
-          v-show="segment.labelVisible"
-          :key="`value-${segment.id}`"
-          :x="chartWidth / 2"
-          :y="segment.centerY + 4"
-          fill="#ffffff"
-          font-size="12"
-          font-weight="600"
-          text-anchor="middle"
-        >
-          {{ formatChartValue(segment.value) }}
-        </text>
-      </svg>
-    </div>
-
-    <div class="grid min-w-0 gap-2 text-sm">
-      <div
-        v-for="segment in segments"
-        :key="`legend-${segment.id}`"
-        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
-      >
-        <div class="flex min-w-0 items-center gap-2">
-          <span
-            class="h-2.5 w-2.5 shrink-0 rounded-full"
-            :style="{ backgroundColor: segment.color }"
-          />
-
-          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
-            {{ segment.shortLabel }}
-          </span>
-        </div>
-
-        <div class="text-right">
-          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
-            {{ formatChartValue(segment.value) }}
-          </div>
-
-          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
-            {{ segment.percentLabel }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/{dist/custom/widgets/chart/line → custom/widgets/chart}/LineChart.vue

@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -92,7 +92,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]

package/custom/widgets/chart/{pie/PieChart.vue → PieChart.vue}

@@ -89,8 +89,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
-import { CHART_COLORS, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+import { useElementSize } from '../../composables/useElementSize.js'
+import { CHART_COLORS, formatChartLabel, formatChartValue, toFiniteNumber } from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]

package/{dist/custom/widgets/chart/stacked-bar → custom/widgets/chart}/StackedBarChart.vue

@@ -1,6 +1,101 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
+  >
+    <div
+      v-if="showLegend"
+      class="flex flex-wrap items-center gap-3 text-xs text-lightListTableText dark:text-darkListTableText"
+      :class="isCompact ? 'justify-start' : 'justify-end'"
+    >
+      <div
+        v-for="series in normalizedSeries"
+        :key="series.name"
+        class="flex items-center gap-1.5"
+      >
+        <span
+          class="h-2.5 w-2.5 rounded-full"
+          :style="{ backgroundColor: series.color }"
+        />
+        <span>{{ series.name }}</span>
+      </div>
+    </div>
+
+    <div
+      ref="svgEl"
+      class="min-h-0 overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="xField"
+      >
+        <g class="text-lightListTableText dark:text-darkListTableText">
+          <line
+            v-for="tick in yTicks"
+            :key="tick.y"
+            :x1="padding.left"
+            :x2="chartWidth - padding.right"
+            :y1="tick.y"
+            :y2="tick.y"
+            stroke="currentColor"
+            stroke-opacity="0.14"
+          />
+          <text
+            v-for="tick in yTicks"
+            :key="`label-${tick.y}`"
+            :x="padding.left - 8"
+            :y="tick.y + 4"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="end"
+          >
+            {{ formatChartValue(tick.value) }}
+          </text>
+        </g>
+
+        <g
+          v-for="(bar, barIndex) in bars"
+          :key="bar.label"
+        >
+          <rect
+            v-for="segment in bar.segments"
+            :key="segment.id"
+            v-show="segment.height > 0"
+            :x="bar.x"
+            :y="segment.y"
+            :width="barWidth"
+            :height="segment.height"
+            :fill="segment.color"
+            rx="3"
+          >
+            <title>{{ getBarTooltip(bar) }}</title>
+          </rect>
+
+          <text
+            v-if="visibleLabelIndexes.has(barIndex)"
+            :x="bar.x + barWidth / 2"
+            :y="padding.top + innerHeight + 24"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="middle"
+            class="text-lightListTableText dark:text-darkListTableText"
+          >
+            {{ bar.axisLabel }}
+          </text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -8,7 +103,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -146,96 +241,3 @@ function getBarTooltip(bar: { label: string, total: number, segments: Array<{ na
   ].join('\n')
 }
 </script>
-
-<template>
-  <div
-    ref="rootEl"
-    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
-  >
-    <div
-      v-if="showLegend"
-      class="flex flex-wrap items-center gap-3 text-xs text-lightListTableText dark:text-darkListTableText"
-      :class="isCompact ? 'justify-start' : 'justify-end'"
-    >
-      <div
-        v-for="series in normalizedSeries"
-        :key="series.name"
-        class="flex items-center gap-1.5"
-      >
-        <span
-          class="h-2.5 w-2.5 rounded-full"
-          :style="{ backgroundColor: series.color }"
-        />
-        <span>{{ series.name }}</span>
-      </div>
-    </div>
-
-    <div
-      ref="svgEl"
-      class="min-h-0 overflow-hidden"
-    >
-      <svg
-        v-if="chartWidth > 0 && chartHeight > 0"
-        class="block h-full w-full"
-        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
-        role="img"
-        :aria-label="xField"
-      >
-        <g class="text-lightListTableText dark:text-darkListTableText">
-          <line
-            v-for="tick in yTicks"
-            :key="tick.y"
-            :x1="padding.left"
-            :x2="chartWidth - padding.right"
-            :y1="tick.y"
-            :y2="tick.y"
-            stroke="currentColor"
-            stroke-opacity="0.14"
-          />
-          <text
-            v-for="tick in yTicks"
-            :key="`label-${tick.y}`"
-            :x="padding.left - 8"
-            :y="tick.y + 4"
-            fill="currentColor"
-            font-size="11"
-            text-anchor="end"
-          >
-            {{ formatChartValue(tick.value) }}
-          </text>
-        </g>
-
-        <g
-          v-for="(bar, barIndex) in bars"
-          :key="bar.label"
-        >
-          <rect
-            v-for="segment in bar.segments"
-            :key="segment.id"
-            v-show="segment.height > 0"
-            :x="bar.x"
-            :y="segment.y"
-            :width="barWidth"
-            :height="segment.height"
-            :fill="segment.color"
-            rx="3"
-          >
-            <title>{{ getBarTooltip(bar) }}</title>
-          </rect>
-
-          <text
-            v-if="visibleLabelIndexes.has(barIndex)"
-            :x="bar.x + barWidth / 2"
-            :y="padding.top + innerHeight + 24"
-            fill="currentColor"
-            font-size="11"
-            text-anchor="middle"
-            class="text-lightListTableText dark:text-darkListTableText"
-          >
-            {{ bar.axisLabel }}
-          </text>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>

package/custom/widgets/chart/chart.types.ts

@@ -38,31 +38,3 @@ export type ChartWidgetConfig = {
   color?: string
   colors?: string[]
 }
-
-export type NormalizedChartWidgetConfig = ChartWidgetConfig
-
-export function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined {
-  if (!isRecord(value) || !normalizeChartWidgetType(value.type)) {
-    return undefined
-  }
-
-  return value as ChartWidgetConfig
-}
-
-function normalizeChartWidgetType(value: unknown): ChartWidgetType | undefined {
-  switch (value) {
-    case 'line':
-    case 'pie':
-    case 'bar':
-    case 'stacked_bar':
-    case 'funnel':
-    case 'histogram':
-      return value
-    default:
-      return undefined
-  }
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null
-}

package/dist/custom/api/dashboardApi.d.ts

@@ -1,8 +1,4 @@
-import type { DashboardConfig, DashboardGroupConfig, DashboardGroupMoveDirection, DashboardWidgetConfig, DashboardWidgetMoveDirection } from '../model/dashboard.types.js';
-export type DashboardWidgetConfigValidationError = {
-    field: string;
-    message: string;
-};
+import type { DashboardConfig, EditableDashboardGroupConfig, DashboardGroupMoveDirection, DashboardWidgetConfig, DashboardWidgetConfigValidationError, DashboardWidgetMoveDirection } from '../model/dashboard.types.js';
 export type DashboardResponse = {
     id: string;
     slug: string;
@@ -26,13 +22,14 @@ export declare class DashboardApiError extends Error {
 }
 export declare const dashboardApi: {
     getDashboardConfig(slug: string): Promise<DashboardResponse>;
+    setDashboardConfig(slug: string, config: unknown): Promise<DashboardResponse>;
     addDashboardGroup(slug: string): Promise<DashboardResponse>;
     moveDashboardGroup(slug: string, groupId: string, direction: DashboardGroupMoveDirection): Promise<DashboardResponse>;
     removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse>;
-    setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse>;
+    setDashboardGroupConfig(slug: string, groupId: string, config: EditableDashboardGroupConfig): Promise<DashboardResponse>;
     addDashboardWidget(slug: string, groupId: string): Promise<DashboardResponse>;
     moveDashboardWidget(slug: string, widgetId: string, direction: DashboardWidgetMoveDirection): Promise<DashboardResponse>;
     removeDashboardWidget(slug: string, widgetId: string): Promise<DashboardResponse>;
-    setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse>;
+    setWidgetConfig(slug: string, widgetId: string, config: unknown): Promise<DashboardResponse>;
     getDashboardWidgetData(slug: string, widgetId: string, request?: DashboardWidgetDataRequest): Promise<DashboardWidgetDataResponse>;
 };

package/dist/custom/api/dashboardApi.js

@@ -103,6 +103,11 @@ exports.dashboardApi = {
             return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug });
         });
     },
+    setDashboardConfig(slug, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_config', { slug, config });
+        });
+    },
     addDashboardGroup(slug) {
         return __awaiter(this, void 0, void 0, function* () {
             return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug });

package/dist/custom/api/dashboardApi.ts

@@ -1,16 +1,13 @@
 import type {
   DashboardConfig,
-  DashboardGroupConfig,
+  EditableDashboardGroupConfig,
+  EditableDashboardWidgetConfig,
   DashboardGroupMoveDirection,
   DashboardWidgetConfig,
+  DashboardWidgetConfigValidationError,
   DashboardWidgetMoveDirection,
 } from '../model/dashboard.types.js'
 
-export type DashboardWidgetConfigValidationError = {
-  field: string
-  message: string
-}
-
 export type DashboardResponse = {
   id: string
   slug: string
@@ -143,6 +140,10 @@ export const dashboardApi = {
     return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
   },
 
+  async setDashboardConfig(slug: string, config: unknown): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_config', { slug, config })
+  },
+
   async addDashboardGroup(slug: string): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug })
   },
@@ -166,7 +167,7 @@ export const dashboardApi = {
     })
   },
 
-  async setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse> {
+  async setDashboardGroupConfig(slug: string, groupId: string, config: EditableDashboardGroupConfig): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_group_config', {
       slug,
       groupId,
@@ -200,7 +201,7 @@ export const dashboardApi = {
     })
   },
 
-  async setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse> {
+  async setWidgetConfig(slug: string, widgetId: string, config: unknown): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/set_widget_config', {
       slug,
       widgetId,