fix: improvements for frontend

apps/start/src/components/charts/common-bar.tsx

@@ -1,3 +1,4 @@
+import { getChartColor, getChartTranslucentColor } from '@/utils/theme';
 import { Bar } from 'recharts';
 
 type Options = {
@@ -11,6 +12,26 @@ export const BarWithBorder = (options: Options) => {
   return (props: any) => {
     const { x, y, width, height, value, isActive } = props;
 
+    const fill =
+      options.fill === 'props'
+        ? props.fill
+        : isActive
+          ? options.active.fill
+          : options.fill;
+    const border =
+      options.border === 'props'
+        ? props.stroke
+        : isActive
+          ? options.active.border
+          : options.border;
+
+    const withActive = (color: string) => {
+      if (color.startsWith('rgba')) {
+        return isActive ? color.replace(/, 0.\d+\)$/, ', 0.4)') : color;
+      }
+      return color;
+    };
+
     return (
       <g>
         <rect
@@ -19,16 +40,18 @@ export const BarWithBorder = (options: Options) => {
           width={width}
           height={height}
           stroke="none"
-          fill={isActive ? options.active.fill : options.fill}
+          fill={withActive(fill)}
+          rx={3}
         />
         {value > 0 && (
           <rect
             x={x}
-            y={y - options.borderHeight - 2}
+            y={y - options.borderHeight - 1}
             width={width}
             height={options.borderHeight}
             stroke="none"
-            fill={isActive ? options.active.border : options.border}
+            fill={withActive(border)}
+            rx={2}
           />
         )}
       </g>
@@ -54,3 +77,24 @@ export const BarShapeBlue = BarWithBorder({
     fill: 'rgba(59, 121, 255, 0.4)',
   },
 });
+export const BarShapeProps = BarWithBorder({
+  borderHeight: 2,
+  border: 'props',
+  fill: 'props',
+  active: {
+    border: 'props',
+    fill: 'props',
+  },
+});
+
+const BarShapes = [...new Array(13)].map((_, index) =>
+  BarWithBorder({
+    borderHeight: 2,
+    border: getChartColor(index),
+    fill: getChartTranslucentColor(index),
+    active: {
+      border: getChartColor(index),
+      fill: getChartTranslucentColor(index),
+    },
+  }),
+);