add basic static-viz internal route and examples (#17172)

frontend/src/metabase/internal/pages/StaticVizPage.jsx

+import React from "react";
+import { Box } from "grid-styled";
+
+import Heading from "metabase/components/type/Heading";
+import Subhead from "metabase/components/type/Subhead";
+import Text from "metabase/components/type/Text";
+
+import { RenderChart } from "../../static-viz/";
+
+export default function StaticVizPage() {
+  return (
+    <Box py={4}>
+      <Box className="wrapper wrapper--trim">
+        <Heading>Static Visualisations</Heading>
+        <Text>
+          These visualizations are used in dashboard subscriptions. They have no
+          interactivity and get generated by the backend to be sent to Slack or
+          in emails. You can use this playground to work on the source code in
+          /static-viz/ and see the effects. You might need to hard refresh to
+          see updates.
+        </Text>
+        <Box py={3}>
+          <Subhead>Bar chart with timeseries data</Subhead>
+          <Box
+            dangerouslySetInnerHTML={{
+              __html: RenderChart("timeseries/bar", {
+                data: [["2010-11-07", 20], ["2020-11-07", 30]],
+                accessors: {
+                  x: row => new Date(row[0]).valueOf(),
+                  y: row => row[1],
+                },
+              }),
+            }}
+          ></Box>
+        </Box>
+        <Box py={3}>
+          <Subhead>Line chart with timeseries data</Subhead>
+          <Box
+            dangerouslySetInnerHTML={{
+              __html: RenderChart("timeseries/line", {
+                data: [
+                  ["2010-11-07", 20],
+                  ["2020-11-07", 30],
+                  ["2021-11-07", 31],
+                ],
+                accessors: {
+                  x: row => new Date(row[0]).valueOf(),
+                  y: row => row[1],
+                },
+              }),
+            }}
+          ></Box>
+        </Box>
+        <Box py={3}>
+          <Subhead>Donut chart showing categorical data</Subhead>
+          <Box
+            dangerouslySetInnerHTML={{
+              __html: RenderChart("categorical/donut", {
+                data: [["donut", 20], ["cronut", 31]],
+                accessors: {
+                  dimension: row => row[0],
+                  metric: row => row[1],
+                },
+              }),
+            }}
+          ></Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

frontend/src/metabase/internal/routes.js

@@ -28,6 +28,7 @@ import IconsPage from "metabase/internal/pages/IconsPage";
 import ColorsPage from "metabase/internal/pages/ColorsPage";
 import ComponentsPage from "metabase/internal/pages/ComponentsPage";
 import ModalsPage from "metabase/internal/pages/ModalsPage";
+import StaticVizPage from "metabase/internal/pages/StaticVizPage";
 
 import { InternalLayout } from "metabase/internal/components/Layout";
 
@@ -42,6 +43,7 @@ export default (
     <Route path="colors" component={ColorsPage} />
     <Route path="components/:componentName" component={ComponentsPage} />
     <Route path="modals" component={ModalsPage} />
+    <Route path="static-viz" component={StaticVizPage} />
     {/* Legacy App pages - not really style guide related, but keep for now */}
     {Object.entries(APPS).map(
       ([name, Component]) =>