added minimalChart and minimalHeader props to BarChart

studio/components/interfaces/Settings/Logs/LogEventChart.tsx

@@ -40,6 +40,9 @@ const LogEventChart: React.FC<Props> = ({ data, onBarClick }) => {
 
   return (
     <BarChart
+      className="py-1 px-2"
+      minimalHeader
+      minmalChart
       data={aggregated}
       attribute="count"
       label="Events"
@@ -48,7 +51,7 @@ const LogEventChart: React.FC<Props> = ({ data, onBarClick }) => {
         // 60s before
         onBarClick((Number(timestamp) + 60) * 1000 * 1000)
       }}
-      customDateFormat="YYYY-MM-DDTHH:mm:ss"
+      customDateFormat="D MMM, HH:mm"
     />
   )
 }

studio/components/to-be-cleaned/Charts/ChartRenderer.tsx

@@ -44,6 +44,7 @@ const Header = ({
   data,
   customDateFormat,
   label,
+  minimalHeader = false,
 }: any) => {
   let FOCUS_FORMAT = customDateFormat
     ? customDateFormat
@@ -85,22 +86,44 @@ const Header = ({
     }
   }
 
+  const chartTitle = (
+    <Typography.Text small={minimalHeader? true : false} className="mb-0" type="secondary">
+      {label ?? attribute}
+    </Typography.Text>
+  )
+  const highlighted = (
+    <Typography.Title level={minimalHeader ? 5 : 3} className="my-0 font-normal">
+      {title}
+      <span className="text-lg">{format}</span>
+    </Typography.Title>
+  )
+  const date = (
+    <Typography.Text type="secondary" className="opacity-50" small>
+      {focus ? (
+        data && data[focus] && dayjs(data[focus].period_start).format(FOCUS_FORMAT)
+      ) : (
+        <span className="opacity-0">x</span>
+      )}
+    </Typography.Text>
+  )
+
+  if (minimalHeader) {
+    return (
+      <div className="flex flex-row gap-x-4 items-center" style={{ minHeight: '1.8rem' }}>
+        {chartTitle}
+        <div className="flex flex-row gap-x-2 items-baseline">
+          {highlighted}
+          {date}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <>
-      <Typography.Text className="mb-0" type="secondary">
-        {label ?? attribute}
-      </Typography.Text>
-      <Typography.Title level={3} className="mb-0 font-normal">
-        {title}
-        <span className="text-lg">{format}</span>
-      </Typography.Title>
-      <Typography.Text type="secondary" className="opacity-50" small>
-        {focus ? (
-          data && data[focus] && dayjs(data[focus].period_start).format(FOCUS_FORMAT)
-        ) : (
-          <span className="opacity-0">x</span>
-        )}
-      </Typography.Text>
+      {chartTitle}
+      {highlighted}
+      {date}
     </>
   )
 }
@@ -144,6 +167,9 @@ export function BarChart({
   customDateFormat,
   label,
   onBarClick,
+  minimalHeader,
+  minmalChart,
+  className = '',
 }: any) {
   const hasData = data ? dataCheck(data, attribute) : true
 
@@ -167,89 +193,92 @@ export function BarChart({
 
   return (
     <Loading active={!data}>
-      <Header
-        attribute={attribute}
-        focus={focusBar}
-        highlightedValue={highlightedValue}
-        data={data}
-        label={label}
-        format={format}
-        customDateFormat={customDateFormat}
-      />
-      <div style={{ width: '100%', height: '160px' }}>
-        {hasData ? (
-          <>
-            <ResponsiveContainer>
-              <RechartBarChart
-                data={data}
-                margin={{
-                  top: 0,
-                  right: 0,
-                  left: 0,
-                  bottom: 0,
-                }}
-                className="overflow-visible cursor-pointer"
-                onMouseMove={onMouseMove}
-                onMouseLeave={onMouseLeave}
-                onClick={(tooltipData: any) => {
-                  // receives tooltip data https://github.com/recharts/recharts/blob/2a3405ff64a0c050d2cf94c36f0beef738d9e9c2/src/chart/generateCategoricalChart.tsx
-                  if (onBarClick) onBarClick(tooltipData)
-                }}
-              >
-                <XAxis
-                  dataKey="period_start"
-                  //interval={size === 'small' ? 5 : 1}
-                  interval={data ? data.length - 2 : 0}
-                  angle={0}
-                  // stroke="#4B5563"
-                  tick={{ fontSize: '0px', color: '#6B7280' }}
-                  axisLine={{ stroke: '#444444' }}
-                  tickLine={{ stroke: '#444444' }}
-                />
-                <Tooltip content={<CustomTooltip />} />
-                {/* <YAxis dataKey={attribute} /> */}
-                {/* <YAxis type="number" domain={[(0, 100)]} /> */}
-                {yAxisLimit && <YAxis type="number" domain={[0, yAxisLimit]} hide />}
-                <Bar
-                  dataKey={attribute}
-                  fill="#3ecf8e"
-                  // barSize={2}
-                  animationDuration={300}
+      <div className={className}>
+        <Header
+          minimalHeader={minimalHeader}
+          attribute={attribute}
+          focus={focusBar}
+          highlightedValue={highlightedValue}
+          data={data}
+          label={label}
+          format={format}
+          customDateFormat={customDateFormat}
+        />
+        <div style={{ width: '100%', height: minmalChart ? "96px" :'160px' }}>
+          {hasData ? (
+            <>
+              <ResponsiveContainer>
+                <RechartBarChart
+                  data={data}
+                  margin={{
+                    top: 0,
+                    right: 0,
+                    left: 0,
+                    bottom: 0,
+                  }}
+                  className="overflow-visible cursor-pointer"
+                  onMouseMove={onMouseMove}
+                  onMouseLeave={onMouseLeave}
+                  onClick={(tooltipData: any) => {
+                    // receives tooltip data https://github.com/recharts/recharts/blob/2a3405ff64a0c050d2cf94c36f0beef738d9e9c2/src/chart/generateCategoricalChart.tsx
+                    if (onBarClick) onBarClick(tooltipData)
+                  }}
                 >
-                  {data?.map((entry: any, index: any) => (
-                    <Cell
-                      key={`cell-${index}`}
-                      className={`transition-all duration-300 ${
-                        onBarClick ? 'cursor-pointer' : ''
-                      }`}
-                      fill={
-                        focusBar === index || mouseLeave ? '#3ecf8e' : 'rgba(62, 207, 142, 0.2)'
-                      }
-                      enableBackground={12}
-                      // for this, we make the hovered colour #2B5CE7, else its opacity decreases to 20%
-                    />
-                  ))}
-                </Bar>
-              </RechartBarChart>
-            </ResponsiveContainer>
-            {data && (
-              <div className="flex items-center justify-between -mt-5">
-                <Typography.Text type="secondary" className="opacity-50" small>
-                  {dayjs(data[0].period_start).format(
-                    customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
-                  )}
-                </Typography.Text>
-                <Typography.Text type="secondary" className="opacity-50" small>
-                  {dayjs(data[data?.length - 1]?.period_start).format(
-                    customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
-                  )}
-                </Typography.Text>
-              </div>
-            )}
-          </>
-        ) : (
-          <NoData />
-        )}
+                  <XAxis
+                    dataKey="period_start"
+                    //interval={size === 'small' ? 5 : 1}
+                    interval={data ? data.length - 2 : 0}
+                    angle={0}
+                    // stroke="#4B5563"
+                    tick={{ fontSize: '0px', color: '#6B7280' }}
+                    axisLine={{ stroke: '#444444' }}
+                    tickLine={{ stroke: '#444444' }}
+                  />
+                  <Tooltip content={<CustomTooltip />} />
+                  {/* <YAxis dataKey={attribute} /> */}
+                  {/* <YAxis type="number" domain={[(0, 100)]} /> */}
+                  {yAxisLimit && <YAxis type="number" domain={[0, yAxisLimit]} hide />}
+                  <Bar
+                    dataKey={attribute}
+                    fill="#3ecf8e"
+                    // barSize={2}
+                    animationDuration={300}
+                  >
+                    {data?.map((entry: any, index: any) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        className={`transition-all duration-300 ${
+                          onBarClick ? 'cursor-pointer' : ''
+                        }`}
+                        fill={
+                          focusBar === index || mouseLeave ? '#3ecf8e' : 'rgba(62, 207, 142, 0.2)'
+                        }
+                        enableBackground={12}
+                        // for this, we make the hovered colour #2B5CE7, else its opacity decreases to 20%
+                      />
+                    ))}
+                  </Bar>
+                </RechartBarChart>
+              </ResponsiveContainer>
+              {data && (
+                <div className="flex items-center justify-between -mt-5">
+                  <Typography.Text type="secondary" className="opacity-50" small>
+                    {dayjs(data[0].period_start).format(
+                      customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
+                    )}
+                  </Typography.Text>
+                  <Typography.Text type="secondary" className="opacity-50" small>
+                    {dayjs(data[data?.length - 1]?.period_start).format(
+                      customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
+                    )}
+                  </Typography.Text>
+                </div>
+              )}
+            </>
+          ) : (
+            <NoData />
+          )}
+        </div>
       </div>
     </Loading>
   )