feat(ui-dashboard): migrate value-formatter option panels (0.2.3)

packages/ui-dashboard/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@sentio/ui-dashboard",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Dashboard UI components for the Sentio platform, decoupled from backend services.",
   "exports": {
     ".": {

packages/ui-dashboard/src/charts/options/OptionPanels.stories.tsx

@@ -4,11 +4,13 @@ import { LineControls } from './LineControls'
 import { LabelControls } from './LabelControls'
 import { PieChartControls } from './PieChartControls'
 import { BarGaugeControls } from './BarGaugeControls'
+import { ValueControls } from './ValueControls'
 import type {
   LineConfigLike,
   LabelConfigLike,
   PieConfigLike,
-  BarGaugeConfigLike
+  BarGaugeConfigLike,
+  ValueConfigLike
 } from '../../types'
 
 function Frame({
@@ -80,3 +82,25 @@ export const BarGauge: Story = () => {
   )
 }
 BarGauge.meta = { description: 'Bar-gauge direction/calculation/sort options' }
+
+export const Value: Story = () => {
+  const [config, setConfig] = useState<ValueConfigLike>({
+    valueFormatter: 'NumberFormatter',
+    style: 'Standard',
+    maxFractionDigits: 2
+  })
+  return (
+    <Frame value={config}>
+      <ValueControls
+        config={config}
+        onChange={setConfig}
+        defaultOpen
+        showPrefix
+        showSuffix
+      />
+    </Frame>
+  )
+}
+Value.meta = {
+  description: 'Value formatter (number/date/string mapping) + prefix/suffix'
+}

packages/ui-dashboard/src/charts/options/ValueControls.tsx

@@ -0,0 +1,77 @@
+import { defaults } from 'lodash'
+import { Checkbox, DisclosurePanel } from '@sentio/ui-core'
+import { produce } from 'immer'
+import {
+  ValueFormatters,
+  ValueOptions,
+  type ValueFormatter
+} from './ValueOptions'
+import type { ValueConfigLike } from '../../types'
+
+interface Props {
+  config?: ValueConfigLike
+  defaultOpen?: boolean
+  onChange: (config: ValueConfigLike) => void
+  formatters?: ValueFormatter[]
+  showPrefix?: boolean
+  showSuffix?: boolean
+}
+
+export const defaultConfig: ValueConfigLike = {
+  valueFormatter: 'NumberFormatter',
+  showValueLabel: false,
+  maxSignificantDigits: 3,
+  dateFormat: 'LLL',
+  mappingRules: [],
+  style: 'None',
+  maxFractionDigits: 2
+}
+
+export const ValueControls = ({
+  config,
+  defaultOpen,
+  onChange,
+  formatters = ValueFormatters,
+  showPrefix,
+  showSuffix
+}: Props) => {
+  config = defaults(config || {}, defaultConfig)
+  function toggleShowValueLabel(checked: boolean) {
+    config &&
+      onChange(
+        produce(config, (draft) => void (draft.showValueLabel = checked))
+      )
+  }
+  function toggleTooltipTotal(checked: boolean) {
+    config &&
+      onChange(produce(config, (draft) => void (draft.tooltipTotal = checked)))
+  }
+  return (
+    <DisclosurePanel
+      title="Value Options"
+      defaultOpen={defaultOpen}
+      containerClassName="w-full bg-default-bg"
+    >
+      <ValueOptions
+        onChange={onChange}
+        config={config}
+        formatters={formatters}
+        showPrefix={showPrefix}
+        showSuffix={showSuffix}
+      />
+
+      <div className="mt-2 flex items-center gap-2">
+        <Checkbox
+          checked={config?.showValueLabel}
+          onChange={toggleShowValueLabel}
+          label="Show value label"
+        />
+        <Checkbox
+          checked={config?.tooltipTotal}
+          onChange={toggleTooltipTotal}
+          label="Show total in tooltip"
+        />
+      </div>
+    </DisclosurePanel>
+  )
+}