Basic project setup for visualizations extraction

client/app/pages/home/Home.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { TestRenderer } from "redash-visualizations";
 import { axios } from "@/services/axios";
 import PropTypes from "prop-types";
 import { includes, isEmpty } from "lodash";
@@ -16,6 +17,59 @@ import { Query } from "@/services/query";
 
 import "./Home.less";
 
+function VisualizationExample() {
+  return (
+    <div>
+      <TestRenderer
+        type="COUNTER"
+        options={{
+          counterLabel: "",
+          counterColName: "a",
+          rowNumber: 3,
+          targetRowNumber: 3,
+          stringDecimal: 0,
+          stringDecChar: ".",
+          stringThouSep: ",",
+          tooltipFormat: "0,0.000",
+          targetColName: "b",
+          defaultColumns: 2,
+          countRow: true,
+          defaultRows: 5,
+        }}
+        data={{
+          columns: [
+            {
+              name: "a",
+              friendly_name: "a",
+              type: "float",
+            },
+            {
+              name: "b",
+              friendly_name: "b",
+              type: "float",
+            },
+          ],
+          rows: [
+            {
+              a: 1000,
+              b: 1000,
+            },
+            {
+              a: 1000,
+              b: 67000,
+            },
+            {
+              a: 45000,
+              b: 1000,
+            },
+          ],
+        }}
+        visualizationName="Test"
+      />
+    </div>
+  );
+}
+
 function DeprecatedEmbedFeatureAlert() {
   return (
     <Alert
@@ -158,6 +212,9 @@ function Home() {
       <div className="container">
         {includes(messages, "using-deprecated-embed-feature") && <DeprecatedEmbedFeatureAlert />}
         {includes(messages, "email-not-verified") && <EmailNotVerifiedAlert />}
+
+        <VisualizationExample />
+
         <EmptyState
           header="Welcome to Redash 👋"
           description="Connect to any data source, easily visualize and share your data"

package.json

@@ -76,6 +76,7 @@
     "react-resizable": "^1.10.1",
     "react-sortable-hoc": "^1.10.1",
     "react-virtualized": "^9.21.2",
+    "redash-visualizations": "file:redash-visualizations",
     "tinycolor2": "^1.4.1",
     "universal-router": "^8.3.0",
     "use-debounce": "^3.1.0",

redash-visualizations/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "module-resolver",
+      {
+        "root": ["./src"],
+        "alias": {
+          "@": "./src"
+        }
+      }
+    ]
+  ]
+}

redash-visualizations/.gitignore

@@ -0,0 +1,20 @@
+# dependencies
+node_modules
+
+# builds
+/build
+/dist
+/lib
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

redash-visualizations/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["dist", "lib"]
+}