@espressif/dashboard-ui-components 1.7.0 → 1.9.0

package/src/assets/illustrations/rm-dashboard-update.svg

@@ -0,0 +1,229 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="rm-dashboard-update" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.67 533.92">
+  <!--
+    RainMaker cloud (taken from the product logo) delivering an update to a
+    dashboard on a laptop. Companion to rm-data-download: same canvas, cloud
+    and connector, so the two read as one family.
+
+    One source, two variants (see illustration-variants.ts):
+    - static: every SMIL element is stripped and `data-variant="animated"`
+      groups are dropped, so the base attribute values below ARE the resting
+      frame (chart bars up, progress two thirds full, two packages in flight).
+    - animated: `data-variant="static"` groups are dropped. Packages arrive
+      1.5s apart (package k lands at 3s + 1.5s * k); each landing refreshes
+      one stat card, while the chart regrows and the sync badge spins.
+    Variant groups must not contain nested <g> elements: the selector is a
+    non-greedy regex up to the first closing tag.
+
+    Theme colours come from the design tokens; the cloud keeps the logo's own
+    reds on purpose. Ids are prefixed "rmdu-" because the markup is inlined.
+  -->
+  <defs>
+    <style>
+      .rmdu-card { fill: var(--color-card); }
+      .rmdu-muted { fill: var(--color-muted); }
+      .rmdu-muted-fg { fill: var(--color-muted-foreground); }
+      .rmdu-gray { fill: var(--color-gray); }
+      .rmdu-primary { fill: var(--color-primary); }
+      .rmdu-primary-light { fill: var(--color-primary-light); }
+      .rmdu-highlight { fill: var(--color-primary-light); }
+      .rmdu-flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .55; }
+      .rmdu-pkg-frame { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; }
+      .rmdu-glyph { fill: none; stroke: var(--color-primary-foreground); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+    </style>
+
+    <linearGradient id="rmdu-cloud" x1=".83" y1="92.99" x2="512.02" y2="92.99" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fc4c3b"/>
+      <stop offset=".5" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdu-cloud-top" x1="340.71" y1="86.7" x2="166.21" y2="-87.76" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdu-cloud-band" x1="43.64" y1="194.71" x2="364.07" y2="194.71" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdu-cloud-sweep" x1="377.59" y1="200.5" x2="479.34" y2="200.5" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f94939"/>
+      <stop offset="1" stop-color="#d43129"/>
+    </linearGradient>
+    <linearGradient id="rmdu-dot" x1="130.74" y1="157.26" x2="95.26" y2="121.82" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset=".17" stop-color="#dd372d"/>
+      <stop offset=".67" stop-color="#f14436"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdu-drop" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#fc4c3b"/>
+      <stop offset=".57" stop-color="#eb3b30"/>
+      <stop offset="1" stop-color="#e5352c"/>
+    </linearGradient>
+
+    <!-- The three rain dashes of the logo, reused for the static logo and the falling copies. -->
+    <g id="rmdu-rain">
+      <path fill="url(#rmdu-drop)" d="M295.41,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.99-9.37,22.07-10.49,31.44-2.5s10.49,22.07,2.5,31.44h0l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
+      <path fill="url(#rmdu-drop)" d="M195.75,420.01c-5.3,0-10.42-1.89-14.43-5.35-9.37-7.95-10.52-21.99-2.57-31.36.02-.02.03-.04.05-.06l46.42-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
+      <path fill="url(#rmdu-drop)" d="M96.14,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.22,4.98-10.42,7.84-16.95,7.82h0Z"/>
+    </g>
+
+
+    <!-- One update package travelling from the cloud to the dashboard: an up-arrow chip and a version label. -->
+    <g id="rmdu-package">
+      <rect class="rmdu-pkg-frame" x="-31" y="-13" width="62" height="26" rx="7"/>
+      <circle class="rmdu-primary" cx="-17" cy="0" r="7"/>
+      <path class="rmdu-glyph" d="M-17 3.5 V-3.5 M-20 -0.8 L-17 -3.8 L-14 -0.8"/>
+      <rect class="rmdu-muted-fg" x="-5" y="-5" width="26" height="5" rx="2.5"/>
+      <rect class="rmdu-muted-fg" x="-5" y="3" width="16" height="4" rx="2" opacity=".6"/>
+    </g>
+
+    <path id="rmdu-flow-path" d="M338 178 C 440 178, 462 402, 560 402"/>
+  </defs>
+
+  <!-- Ground -->
+  <ellipse class="rmdu-muted" cx="440" cy="526" rx="380" ry="7.5"/>
+
+  <!-- RainMaker cloud, straight from the logo (viewBox 512 x 420), scaled down. -->
+  <g transform="translate(48 30) scale(0.58)">
+    <!-- Falling copies of the logo's rain, emitted continuously. -->
+    <g data-variant="animated" opacity=".55">
+      <use href="#rmdu-rain">
+        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="0s" repeatCount="indefinite"/>
+        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>
+      </use>
+      <use href="#rmdu-rain">
+        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
+        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
+      </use>
+    </g>
+
+    <use href="#rmdu-rain"/>
+    <circle fill="url(#rmdu-dot)" cx="113" cy="253.55" r="25.08">
+      <animate attributeName="r" values="25.08;27.5;25.08" dur="2.4s" repeatCount="indefinite"/>
+    </circle>
+    <path fill="url(#rmdu-cloud)" d="M400.41,142.72h0C397.94,61.46,330.05-2.41,248.79.07,171.43,2.43,109.11,64.29,106.18,141.63h0C44.34,144.92-3.13,197.72.16,259.56c3.2,60.25,53.51,107.16,113.84,106.16h201.58c10.54-.84,20.1,6.2,22.43,16.52h0l20.77-24.38h0c3.57-4.17,5.45-9.51,5.3-14.99-.47-12.19-10.53-21.81-22.73-21.73H113.74c-37.31,1.14-68.47-28.18-69.61-65.49s28.18-68.47,65.49-69.61c1.11-.03,2.23-.04,3.34-.02,4.07,0,8.12.37,12.13,1.09,5.86,1.08,11.91-.25,16.78-3.69,7.2-4.74,11.02-13.2,9.82-21.73-.69-4.79-1.04-9.63-1.04-14.47,0-56.67,45.94-102.61,102.61-102.61s102.61,45.94,102.61,102.61v4.35h0c-41.09,17.61-67.82,57.91-68.06,102.61-.1,12.4,9.81,22.56,22.21,22.77,12.31.05,22.33-9.9,22.38-22.21v-.09c-.15-37.32,29.99-67.7,67.32-67.85,37.32-.15,67.7,29.99,67.85,67.32.07,17.03-6.3,33.45-17.82,45.99l-.3.39-66.37,76.54c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l66.28-76.14c41.57-45.93,38.04-116.87-7.89-158.44-20.48-18.53-47.07-28.86-74.69-29.01h0v-.03Z"/>
+    <path fill="url(#rmdu-cloud-top)" d="M253.21,20.42c71.54-.01,133.13,50.5,147.12,120.65C396.84,59.85,328.17-3.17,246.95.31c-76.06,3.26-137.08,63.98-140.73,140.02,14.27-69.82,75.72-119.95,146.99-119.91Z"/>
+    <path fill="url(#rmdu-cloud-band)" d="M358.78,357.9h0c7.97-9.42,6.79-23.51-2.62-31.48-4.02-3.4-9.11-5.27-14.37-5.29H113c-37.3-.02-67.53-30.24-67.58-67.54,0-6.2.86-12.37,2.52-18.34,0,0-43.46,130.38,145.86,130.38h121.69c10.56-.84,20.12,6.22,22.43,16.56l20.86-24.3h0Z"/>
+    <path fill="url(#rmdu-cloud-sweep)" d="M454.44,215.04c18.93,25.91,17,61.56-4.61,85.27l-.3.39-66.45,76.32c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l17.38-19.99h0c88.14-101.83,20.34-171.28,20.34-171.28h0Z"/>
+  </g>
+
+  <!-- Connector: dashes flow from the cloud towards the laptop. -->
+  <use href="#rmdu-flow-path" class="rmdu-flow">
+    <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="0.9s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Laptop -->
+  <g id="rmdu-laptop">
+    <rect class="rmdu-muted-fg" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36"/>
+    <path class="rmdu-gray" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>
+    <path class="rmdu-muted" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>
+    <circle class="rmdu-card" cx="674.98" cy="318.61" r="3.7"/>
+
+    <rect class="rmdu-card" x="539.84" y="327.23" width="270.27" height="169.5"/>
+    <rect class="rmdu-primary" x="539.84" y="327.23" width="270.27" height="17.44"/>
+    <circle class="rmdu-card" cx="551" cy="335.95" r="2.6" opacity=".85"/>
+    <circle class="rmdu-card" cx="560" cy="335.95" r="2.6" opacity=".85"/>
+    <circle class="rmdu-card" cx="569" cy="335.95" r="2.6" opacity=".85"/>
+
+    <!-- Dashboard sidebar -->
+    <rect class="rmdu-muted" x="551" y="355" width="50" height="103" rx="4"/>
+    <rect class="rmdu-primary" x="558" y="364" width="34" height="5" rx="2.5"/>
+    <rect class="rmdu-muted-fg" x="558" y="377" width="28" height="4" rx="2" opacity=".7"/>
+    <rect class="rmdu-muted-fg" x="558" y="389" width="32" height="4" rx="2" opacity=".7"/>
+    <rect class="rmdu-muted-fg" x="558" y="401" width="24" height="4" rx="2" opacity=".7"/>
+
+    <!-- Stat cards: each flashes as a package lands. The highlight rests at opacity 0, so the static frame is unaffected. -->
+    <g>
+      <rect class="rmdu-muted" x="609" y="355" width="58" height="34" rx="4"/>
+      <rect class="rmdu-highlight" x="609" y="355" width="58" height="34" rx="4" opacity="0">
+        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
+      </rect>
+      <rect class="rmdu-primary" x="616" y="363" width="16" height="4" rx="2"/>
+      <rect class="rmdu-muted-fg" x="616" y="373" width="30" height="7" rx="3.5"/>
+    </g>
+    <g>
+      <rect class="rmdu-muted" x="675" y="355" width="58" height="34" rx="4"/>
+      <rect class="rmdu-highlight" x="675" y="355" width="58" height="34" rx="4" opacity="0">
+        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="4.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect class="rmdu-primary" x="682" y="363" width="16" height="4" rx="2"/>
+      <rect class="rmdu-muted-fg" x="682" y="373" width="26" height="7" rx="3.5"/>
+    </g>
+    <g>
+      <rect class="rmdu-muted" x="741" y="355" width="58" height="34" rx="4"/>
+      <rect class="rmdu-highlight" x="741" y="355" width="58" height="34" rx="4" opacity="0">
+        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="6s" repeatCount="indefinite"/>
+      </rect>
+      <rect class="rmdu-primary" x="748" y="363" width="16" height="4" rx="2"/>
+      <rect class="rmdu-muted-fg" x="748" y="373" width="22" height="7" rx="3.5"/>
+    </g>
+
+    <!-- Chart: bars at full height at rest; when animated they shrink and regrow with each cycle. -->
+    <rect class="rmdu-muted" x="609" y="397" width="190" height="61" rx="4" opacity=".6"/>
+    <rect class="rmdu-primary-light" x="615" y="424" width="22" height="28" rx="3">
+      <animate attributeName="height" values="14;28;28;14" keyTimes="0;.3;.85;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="438;424;424;438" keyTimes="0;.3;.85;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>
+    </rect>
+    <rect class="rmdu-primary-light" x="651" y="412" width="22" height="40" rx="3">
+      <animate attributeName="height" values="22;40;40;22" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="430;412;412;430" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect class="rmdu-primary-light" x="687" y="430" width="22" height="22" rx="3">
+      <animate attributeName="height" values="12;22;22;12" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.4s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="440;430;430;440" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.4s" repeatCount="indefinite"/>
+    </rect>
+    <rect class="rmdu-primary" x="723" y="406" width="22" height="46" rx="3">
+      <animate attributeName="height" values="26;46;46;26" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.6s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="426;406;406;426" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.6s" repeatCount="indefinite"/>
+    </rect>
+    <rect class="rmdu-primary-light" x="759" y="418" width="22" height="34" rx="3">
+      <animate attributeName="height" values="18;34;34;18" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.8s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="434;418;418;434" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.8s" repeatCount="indefinite"/>
+    </rect>
+
+    <!-- Update progress: two thirds full at rest, filling over the cycle when animated. -->
+    <rect class="rmdu-muted" x="551" y="470" width="216" height="8" rx="4"/>
+    <rect class="rmdu-primary" x="551" y="470" width="144" height="8" rx="4">
+      <animate attributeName="width" values="0;216;216" keyTimes="0;.92;1" dur="4.5s" repeatCount="indefinite"/>
+    </rect>
+
+    <!-- Sync badge -->
+    <g transform="translate(786 474)">
+      <circle class="rmdu-primary" r="11"/>
+      <g class="rmdu-glyph">
+        <path d="M-5.17 -1.88 A5.5 5.5 0 0 1 5.17 -1.88 M6.44 -4.6 L5.17 -1.88 L2.45 -3.15"/>
+        <path d="M5.17 1.88 A5.5 5.5 0 0 1 -5.17 1.88 M-6.44 4.6 L-5.17 1.88 L-2.45 3.15"/>
+        <animateTransform attributeName="transform" type="rotate" values="0;360" dur="2s" repeatCount="indefinite"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Static frame: two packages frozen part-way along the connector. -->
+  <g data-variant="static">
+    <use href="#rmdu-package" x="422" y="241"/>
+    <use href="#rmdu-package" x="492" y="359"/>
+  </g>
+
+  <!-- Animated: three packages in flight, arriving 1.5s apart. -->
+  <g data-variant="animated">
+    <use href="#rmdu-package" opacity="0">
+      <animateMotion dur="4.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdu-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>
+    </use>
+    <use href="#rmdu-package" opacity="0">
+      <animateMotion dur="4.5s" begin="1.5s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdu-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="1.5s" repeatCount="indefinite"/>
+    </use>
+    <use href="#rmdu-package" opacity="0">
+      <animateMotion dur="4.5s" begin="3s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdu-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
+    </use>
+  </g>
+</svg>