Merge branch 'main' into develop

Author: Lorezz

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "graph-italia-components",
   "description": "A simple React component library.",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "keywords": [
     "react",
     "typescript",

packages/components/src/components/RenderGridDashboard.tsx

@@ -159,7 +159,6 @@ export function RenderGridDashboard({
           const colSpan = toColSpan(settings.w, bp);
           const slotHeight =
             rowHeight * settings.h + margin * (settings.h - 1);
-
           return (
             <div
               key={settings.i}

packages/components/src/components/chartwrapper/ChartWrapper.tsx

@@ -15,6 +15,7 @@ import {
   formatUpdatedAt,
   observeElementHeight,
 } from "./utils";
+import { isArray } from "echarts/types/src/export/api/util.js";
 
 export type ChartWrapperProps = {
   id?: string;
@@ -84,7 +85,7 @@ export default function ChartWrapper(props: ChartWrapperProps) {
   const [activeTab, setActiveTab] = useState<number>(0);
 
   const tableData = showDataTransposed && data.data ? transposeData(data.data) : data.data;
-  const csvData = dataToCSV(tableData);
+  const csvData = tableData && Array.isArray(tableData) && dataToCSV(tableData);
 
   const formattedUpdatedAt = formatUpdatedAt(data.updatedAt);
   const infoClean = cleanupInfoText(text);
@@ -99,6 +100,10 @@ export default function ChartWrapper(props: ChartWrapperProps) {
   const [chartAreaRowHeight, setChartAreaRowHeight] = useState<number>(400);
   const wrapRef = useRef(null);
 
+  const chartType = data.chart || "bar";
+  const hasData = !(chartType == "cmap" || chartType == "kpi" || chartType == "kpiGroup") && Array.isArray(data.data) && data.data.length > 0;
+  const hasPic = !(chartType == "cmap" || chartType == "kpi" || chartType == "kpiGroup");
+
   useEffect(() => {
     return observeElementHeight(
       () => wrapRef.current as unknown as HTMLElement | null,
@@ -176,7 +181,8 @@ export default function ChartWrapper(props: ChartWrapperProps) {
             )}
           </div>
 
-          <div
+
+          {hasData && <div
             id={`tab2-${id}-content`}
             role="tabpanel"
             aria-labelledby={`tab2-${id}`}
@@ -185,6 +191,7 @@ export default function ChartWrapper(props: ChartWrapperProps) {
           >
             <DataTable id={id} data={tableData as any[]} poweredByLabel="" />
           </div>
+          }
 
           <div
             id={`tab3-${id}-content`}
@@ -219,7 +226,7 @@ export default function ChartWrapper(props: ChartWrapperProps) {
         )}
 
         <div className="cw-actions">
-          {enableDownloadData && (
+          {enableDownloadData && hasData && (
             <button
               type="button"
               className="cw-btn cw-btn--primary"
@@ -239,7 +246,7 @@ export default function ChartWrapper(props: ChartWrapperProps) {
             </button>
           )}
 
-          {enableDownloadImage && (
+          {enableDownloadImage && hasPic && (
             <button
               type="button"
               className="cw-btn cw-btn--primary"

packages/components/src/components/kpi/KpiGroup.tsx

@@ -13,7 +13,7 @@ export default function KpiGroup({
   hFactor: number;
   rowHeight?: number;
 }) {
-  const { id, config } = data;
+  const { id, config, name, description } = data;
   const dataSource: KpiItemType[] = data.dataSource as KpiItemType[] || data.data as any[] || [];
   const { direction, background } = config;
   const isVertical = direction === "vertical";
@@ -33,30 +33,33 @@ export default function KpiGroup({
   // When accent background is set at group level, propagate to items
   const items: KpiItemType[] = background === "accent"
     ? dataSource.map((item) => ({
-        ...item,
-        background_color: item.background_color || "accent",
-      }))
+      ...item,
+      background_color: item.background_color || "accent",
+    }))
     : dataSource;
 
   const resolvedTheme = useResolvedTheme();
 
   return (
-    <div
-      id={id}
-      className={`${resolvedTheme} dv-kpi-group ${kpiGroupClass}`}
-      style={baseStyle}
-      role="list"
-      aria-label="Gruppo di KPI"
-    >
-      {items.map((item: KpiItemType, index: number) => (
-        <div
-          className={`${resolvedTheme} dv-kpi-group-item`}
-          key={`${index}-${item.title}`}
-          role="listitem"
-        >
-          <Kpi data={item} poweredByLabel="" />
-        </div>
-      ))}
+    <div>
+      {name && <h3 className="title">{name}</h3>}
+      <div
+        id={id}
+        className={`${resolvedTheme} dv-kpi-group ${kpiGroupClass}`}
+        style={baseStyle}
+        role="list"
+        aria-label="Gruppo di KPI"
+      >
+        {items.map((item: KpiItemType, index: number) => (
+          <div
+            className={`${resolvedTheme} dv-kpi-group-item`}
+            key={`${index}-${item.title}`}
+            role="listitem"
+          >
+            <Kpi data={item} poweredByLabel="" />
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

packages/components/src/lib/downloadUtils.ts

@@ -43,6 +43,9 @@ export function generateCSV(dataSource: any) {
 }
 
 export function dataToCSV(data: any) {
+  if (!data || !Array.isArray(data) || data.length === 0) {
+    return "";
+  }
   const rows = data.map((r: any) => {
     return r.join(",");
   });

packages/ui-example-app/src/App.tsx

@@ -14,7 +14,7 @@ import SampleWrapperBar from "./SampleWrapperBar";
 import SampleWrapperGeomap from "./SampleWrapperGeomap";
 import SampleWrapperLine from "./SampleWrapperLine";
 import SampleWrapperPie from "./SampleWrapperPie";
-import SampleChartProvider from "./SampleChartProvider";
+// import SampleChartProvider from "./SampleChartProvider";
 // import SampleDashboardProvider from "./SampleDashboardProvider";
 import SampleDashboardGridProvider from "./SampleDashboardGridProvider";