dify

dify/web/app/components/base/simple-pie-chart/index.module.css

@@ -0,0 +1,4 @@
+.simplePieChart {
+  border-radius: 50%;
+  box-shadow: 0 0 5px -3px rgb(from var(--simple-pie-chart-color) r g b / 0.1), 0.5px 0.5px 3px 0 rgb(from var(--simple-pie-chart-color) r g b / 0.3);
+}

dify/web/app/components/base/simple-pie-chart/index.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useMemo, useState } from 'react'
+import SimplePieChart from '.'
+
+const PieChartPlayground = ({
+  initialPercentage = 65,
+  fill = '#fdb022',
+  stroke = '#f79009',
+}: {
+  initialPercentage?: number
+  fill?: string
+  stroke?: string
+}) => {
+  const [percentage, setPercentage] = useState(initialPercentage)
+
+  const label = useMemo(() => `${percentage}%`, [percentage])
+
+  return (
+    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+        <span>Conversion snapshot</span>
+        <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
+          {label}
+        </span>
+      </div>
+      <div className="flex items-center gap-4">
+        <SimplePieChart
+          percentage={percentage}
+          fill={fill}
+          stroke={stroke}
+          size={120}
+        />
+        <div className="flex flex-1 flex-col gap-2">
+          <label className="flex items-center justify-between text-xs font-medium text-text-secondary">
+            Target progress
+            <span className="rounded bg-background-default px-2 py-1 text-[11px] text-text-tertiary">{label}</span>
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={percentage}
+            onChange={event => setPercentage(Number.parseInt(event.target.value, 10))}
+            className="h-2 w-full cursor-pointer appearance-none rounded-full bg-divider-subtle accent-primary-600"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Display/SimplePieChart',
+  component: PieChartPlayground,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Thin radial indicator built with ECharts. Use it for quick percentage snapshots inside cards.',
+      },
+    },
+  },
+  argTypes: {
+    initialPercentage: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    fill: { control: 'color' },
+    stroke: { control: 'color' },
+  },
+  args: {
+    initialPercentage: 65,
+    fill: '#fdb022',
+    stroke: '#f79009',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PieChartPlayground>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const BrandAccent: Story = {
+  args: {
+    fill: '#155EEF',
+    stroke: '#0040C1',
+    initialPercentage: 82,
+  },
+}

dify/web/app/components/base/simple-pie-chart/index.tsx

@@ -0,0 +1,67 @@
+import type { CSSProperties } from 'react'
+import { memo, useMemo } from 'react'
+import ReactECharts from 'echarts-for-react'
+import type { EChartsOption } from 'echarts'
+import style from './index.module.css'
+import classNames from '@/utils/classnames'
+
+export type SimplePieChartProps = {
+  percentage?: number
+  fill?: string
+  stroke?: string
+  size?: number
+  animationDuration?: number
+  className?: string
+}
+
+const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009', size = 12, animationDuration, className }: SimplePieChartProps) => {
+  const option: EChartsOption = useMemo(() => ({
+    series: [
+      {
+        type: 'pie',
+        radius: ['83%', '100%'],
+        animation: false,
+        data: [
+          { value: 100, itemStyle: { color: stroke } },
+        ],
+        emphasis: {
+          disabled: true,
+        },
+        labelLine: {
+          show: false,
+        },
+        cursor: 'default',
+      },
+      {
+        type: 'pie',
+        radius: '83%',
+        animationDuration: animationDuration ?? 600,
+        data: [
+          { value: percentage, itemStyle: { color: fill } },
+          { value: 100 - percentage, itemStyle: { color: '#fff' } },
+        ],
+        emphasis: {
+          disabled: true,
+        },
+        labelLine: {
+          show: false,
+        },
+        cursor: 'default',
+      },
+    ],
+  }), [stroke, fill, percentage, animationDuration])
+
+  return (
+    <ReactECharts
+      option={option}
+      className={classNames(style.simplePieChart, className)}
+      style={{
+        '--simple-pie-chart-color': fill,
+        'width': size,
+        'height': size,
+      } as CSSProperties}
+    />
+  )
+}
+
+export default memo(SimplePieChart)