show none when none

frontend/src/components/home/Summary.tsx

@@ -1,8 +1,7 @@
-import { Accessor, Component, createMemo, For, Show } from "solid-js";
+import { Accessor, Component, createMemo } from "solid-js";
 import { useAppState } from "../../state/StateProvider";
 import { DockerContainerState, ServerStatus } from "../../types";
 import Grid from "../shared/layout/Grid";
-import Flex from "../shared/layout/Flex";
 import PieChart, { PieChartSection } from "../shared/PieChart";
 import { COLORS } from "../../style/colors";
 import { useAppDimensions } from "../../state/DimensionProvider";
@@ -41,45 +40,6 @@ const Summary: Component<{}> = (p) => {
 
 export default Summary;
 
-const SummaryItem: Component<{
-  title: string;
-  metrics: Array<{ title: string; class: string; count?: number }>;
-}> = (p) => {
-  return (
-    <Flex
-      class="card light shadow wrap"
-      justifyContent="space-between"
-      alignItems="center"
-    >
-      <h2>{p.title}</h2>
-      <Flex class="wrap">
-        <For each={p.metrics}>
-          {(metric) => (
-            <Show when={metric?.count && metric.count > 0}>
-              <Flex gap="0.4rem" alignItems="center">
-                <div>{metric.title}</div>
-                <h2 class={metric.class}>{metric.count}</h2>
-              </Flex>
-            </Show>
-          )}
-        </For>
-      </Flex>
-    </Flex>
-  );
-};
-
-const BuildsSummary = () => {
-  const { builds } = useAppState();
-  return (
-    <SummaryItem
-      title="builds"
-      metrics={[
-        { title: "total", class: "text-green", count: builds.ids()?.length },
-      ]}
-    />
-  );
-};
-
 function useDeploymentCount(): Accessor<PieChartSection[]> {
   const { deployments } = useAppState();
   const count = createMemo(() => {
@@ -148,3 +108,42 @@ function useServerCount(): Accessor<PieChartSection[]> {
   });
   return count;
 }
+
+// const SummaryItem: Component<{
+//   title: string;
+//   metrics: Array<{ title: string; class: string; count?: number }>;
+// }> = (p) => {
+//   return (
+//     <Flex
+//       class="card light shadow wrap"
+//       justifyContent="space-between"
+//       alignItems="center"
+//     >
+//       <h2>{p.title}</h2>
+//       <Flex class="wrap">
+//         <For each={p.metrics}>
+//           {(metric) => (
+//             <Show when={metric?.count && metric.count > 0}>
+//               <Flex gap="0.4rem" alignItems="center">
+//                 <div>{metric.title}</div>
+//                 <h2 class={metric.class}>{metric.count}</h2>
+//               </Flex>
+//             </Show>
+//           )}
+//         </For>
+//       </Flex>
+//     </Flex>
+//   );
+// };
+
+// const BuildsSummary = () => {
+//   const { builds } = useAppState();
+//   return (
+//     <SummaryItem
+//       title="builds"
+//       metrics={[
+//         { title: "total", class: "text-green", count: builds.ids()?.length },
+//       ]}
+//     />
+//   );
+// };

frontend/src/components/shared/PieChart.tsx

@@ -6,6 +6,7 @@ import {
   For,
   onCleanup,
   onMount,
+  Show,
 } from "solid-js";
 import Grid from "./layout/Grid";
 
@@ -89,10 +90,7 @@ const PieChart: Component<{
               >
                 <div
                   style={{
-                    opacity:
+                    opacity: selected() === index() ? 1 : 0.7,
-                      selected() === index()
-                        ? 1
-                        : 0.7,
                   }}
                 >
                   {section.title}:
@@ -101,6 +99,9 @@ const PieChart: Component<{
               </div>
             )}
           </For>
+          <Show when={sections().length === 0}>
+            <div style={{ opacity: 0.7 }}>none</div>
+          </Show>
         </div>
       </Grid>
       <canvas ref={canvas!} style={{ "z-index": 1 }} />