echarts display names

briefercloud · Jan 22, 2025 · 4f21e5e · 4f21e5e
1 parent 6abce20
commit 4f21e5e
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 20 deletions.
diff --git a/apps/api/src/python/visualizations-v2.ts b/apps/api/src/python/visualizations-v2.ts
@@ -478,7 +478,11 @@ def _briefer_create_visualization(df, options):
                     else:
                         color = colors[color_index % len(colors)]
 
-                    if group:
+                    if not group:
+                        serie["name"] = series.get("name") or series["column"]["name"]
+                    elif group and g_options:
+                        serie["name"] = g_options.get("name") or group
+                    elif group:
                         serie["name"] = group
                     else:
                         serie["name"] = series["column"]["name"]

diff --git a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/display/DisplayControls.tsx b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/display/DisplayControls.tsx
@@ -96,7 +96,7 @@ function DisplayYAxisSeries(props: DisplayYAxisSeriesProps) {
   const groups = useMemo(
     () =>
       uniqBy(
-        (g) => g.name,
+        (g) => g.group,
         (props.series.groups ?? []).concat(
           props.result?.series
             .filter(
@@ -122,14 +122,39 @@ function DisplayYAxisSeries(props: DisplayYAxisSeriesProps) {
     [props.series.id, props.onChangeSeries]
   )
 
-  const color = props.series.color ?? presetColors[0]
+  const columnsSeries = props.result?.series.find(
+    (s) => s.id === props.series.id
+  )
+  const color =
+    props.series.color ??
+    (columnsSeries ? getColorFromSerie(columnsSeries) : null) ??
+    presetColors[0]
   const onChangeColor = useCallback(
     (color: string) => {
       props.onChangeSeries(props.series.id, { ...props.series, color })
     },
     [props.series.id, props.onChangeSeries]
   )
 
+  const onChangeSerieName = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      props.onChangeSeries(props.series.id, {
+        ...props.series,
+        name: e.target.value,
+      })
+    },
+    [props.series.id, props.onChangeSeries]
+  )
+
+  const onBlur = useCallback(() => {
+    if (props.series.name?.trim() === '') {
+      props.onChangeSeries(props.series.id, {
+        ...props.series,
+        name: props.series.column?.name?.toString() ?? '',
+      })
+    }
+  }, [props.series, props.onChangeSeries])
+
   if (!props.series.column) {
     return null
   }
@@ -154,6 +179,9 @@ function DisplayYAxisSeries(props: DisplayYAxisSeriesProps) {
             placeholder={props.series.column?.name?.toString() ?? ''}
             className="w-full border-0 rounded-md ring-1 ring-inset ring-gray-200 focus:ring-1 focus:ring-inset focus:ring-gray-300 bg-white group pr-2.5 pl-10 text-gray-800 text-xs placeholder:text-gray-400 relative"
             disabled={!props.dataframe || !props.isEditable}
+            value={props.series.name ?? ''}
+            onChange={onChangeSerieName}
+            onBlur={onBlur}
           />
           <ColorPicker
             className="absolute left-1 top-1"
@@ -202,18 +230,29 @@ function GroupByList(props: GroupByListProps) {
         return
       }
 
-      const newItems = props.items.slice()
-      const item = newItems[dragIndex]
-      newItems.splice(dragIndex, 1)
-      newItems.splice(
-        position === 'above' && dragIndex < hoverIndex
-          ? hoverIndex - 1
-          : position === 'below' && dragIndex > hoverIndex
-            ? hoverIndex + 1
-            : hoverIndex,
-        0,
-        item
+      const destination = Math.min(
+        Math.max(0, position === 'above' ? hoverIndex : hoverIndex + 1),
+        props.items.length - 1
       )
+
+      const item = props.items[dragIndex]
+      if (destination === 0) {
+        const newItems = [
+          item,
+          ...props.items.filter((i) => i.group !== item.group),
+        ]
+        props.onChangeGroups(newItems)
+        return
+      }
+
+      const newItems = [
+        ...props.items
+          .slice(0, destination)
+          .filter((i) => i.group !== item.group),
+        item,
+        ...props.items.slice(destination).filter((i) => i.group !== item.group),
+      ]
+
       props.onChangeGroups(newItems)
     },
     [props.items, props.onChangeGroups]
@@ -229,20 +268,31 @@ function GroupByList(props: GroupByListProps) {
     [props.items, props.onChangeGroups]
   )
 
+  const onChangeName = useCallback(
+    (group: string, name: string) => {
+      const newItems = props.items.map((item) =>
+        item.group === group ? { ...item, name } : item
+      )
+      props.onChangeGroups(newItems)
+    },
+    [props.items, props.onChangeGroups]
+  )
+
   return (
     <div className="flex flex-col space-y-1">
       {props.items.map((series, j) => {
         return (
           <GroupBySeriesDisplay
             group={series.group}
             name={series.name}
+            onChangeName={onChangeName}
             color={series.color}
+            onChangeColor={onChangeColor}
             yIndex={props.yIndex}
             index={j}
             moveItem={moveItem}
             dataframe={props.dataframe}
             isEditable={props.isEditable}
-            onChangeColor={onChangeColor}
           />
         )
       })}
@@ -253,6 +303,7 @@ function GroupByList(props: GroupByListProps) {
 interface GroupBySeriesDisplayProps {
   group: string
   name: string
+  onChangeName: (group: string, name: string) => void
   color: string
   onChangeColor: (group: string, color: string) => void
   yIndex: number
@@ -360,6 +411,19 @@ function GroupBySeriesDisplay(props: GroupBySeriesDisplayProps) {
     [props.onChangeColor, props.group]
   )
 
+  const onChangeName = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      props.onChangeName(props.group, e.target.value)
+    },
+    [props.onChangeName, props.group]
+  )
+
+  const onBlur = useCallback(() => {
+    if (props.name.trim() === '') {
+      props.onChangeName(props.group, props.group)
+    }
+  }, [props.group, props.name, props.onChangeName])
+
   return (
     <div
       ref={(d) => {
@@ -404,9 +468,12 @@ function GroupBySeriesDisplay(props: GroupBySeriesDisplayProps) {
           <input
             name={`groupby-series-name-${props.yIndex}-${props.index}`}
             type="text"
-            placeholder={props.name}
+            placeholder={props.group}
             className="w-full border-0 rounded-md ring-1 ring-inset ring-gray-200 focus:ring-1 focus:ring-inset focus:ring-gray-300 bg-white group pr-2.5 pl-10 text-gray-800 text-xs placeholder:text-gray-400 relative"
             disabled={!props.dataframe || !props.isEditable}
+            value={props.name}
+            onChange={onChangeName}
+            onBlur={onBlur}
           />
           <ColorPicker
             className="absolute left-1 top-1"

diff --git a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx
@@ -572,7 +572,7 @@ function VisualizationBlockV2(props: Props) {
     [props.block]
   )
 
-  const onChangeGroups = useCallback(
+  const onChangeSeries = useCallback(
     (id: SeriesV2['id'], series: SeriesV2) => {
       const yAxes = attrs.input.yAxes.map((yAxis) => {
         const newSeries = yAxis.series.map((s) => {
@@ -589,8 +589,6 @@ function VisualizationBlockV2(props: Props) {
     [props.block, attrs.input.yAxes]
   )
 
-  console.log(attrs.output)
-
   if (props.isDashboard) {
     return (
       <VisualizationViewV2
@@ -723,7 +721,7 @@ function VisualizationBlockV2(props: Props) {
             onChangeDataLabels={onChangeDataLabels}
             isEditable={props.isEditable}
             result={attrs.output?.result ?? null}
-            onChangeSeries={onChangeGroups}
+            onChangeSeries={onChangeSeries}
           />
           <VisualizationViewV2
             title={attrs.title}