add simple charts library, add simple summary to hq

2026-04-20 19:30:41 -05:00 · 2022-11-30 21:03:19 +01:00
parent 013fec0fe0
commit d8a7d1a72e
14 changed files with 565 additions and 1 deletions
@@ -9,6 +9,7 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@formbricks/charts": "workspace:*",
    "@formbricks/react": "workspace:*",
    "@formbricks/ui": "workspace:*",
    "@headlessui/react": "^1.7.4",
@@ -8,7 +8,8 @@ export default function SubmissionDisplay({ params, submission }) {
  const { form, isLoadingForm } = useForm(params.formId, params.teamId);

  const MergeWithSchema = (submissionData, schema) => {
-    if (!schema) {
+    if (Object.keys(schema).length === 0) {
+      // no schema provided
      return submissionData;
    }
    const mergedData = {};
@@ -3,10 +3,18 @@
 import LoadingSpinner from "@/app/LoadingSpinner";
 import { useForm } from "@/lib/forms";
 import { useTeam } from "@/lib/teams";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import { Bar } from "@formbricks/charts";
+import { useSubmissions } from "@/lib/submissions";

 export default function PipelinesPage({ params }) {
  const { form, isLoadingForm, isErrorForm } = useForm(params.formId, params.teamId);
  const { team, isLoadingTeam, isErrorTeam } = useTeam(params.teamId);
+  const { submissions, isLoadingSubmissions, mutateSubmissions } = useSubmissions(
+    params.teamId,
+    params.formId
+  );

  if (isLoadingForm || isLoadingTeam) {
    return (
@@ -29,6 +37,75 @@ export default function PipelinesPage({ params }) {
          </span>
        </h1>
      </header>
+      {Object.keys(form.schema).length === 0 ? (
+        <div className="rounded-md bg-yellow-50 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-yellow-800">This form doesn&apos;t have a schema </h3>
+              <div className="mt-2 text-sm text-yellow-700">
+                <p>
+                  Formbricks HQ needs a schema of your form to display a summary. Learn more about the schema
+                  and how you can add one in our docs.
+                </p>
+              </div>
+              <div className="mt-4">
+                <div className="-mx-2 -my-1.5 flex">
+                  <Link
+                    target="_blank"
+                    href="https://formbricks.com/docs"
+                    className="rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 focus:ring-offset-yellow-50">
+                    View docs
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div>
+          {form.schema.children.map((elem) => (
+            <>
+              {["email", "number", "phone", "radio", "search", "text", "textarea", "url"].includes(
+                elem.type
+              ) ? (
+                <div className="mb-6">
+                  <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
+                    {elem.label}
+                    <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
+                      Checkbox
+                    </span>
+                  </h2>
+                  <div className="rounded-md bg-teal-50 p-4">
+                    <div className="flex">
+                      <div className="flex-shrink-0">
+                        <InformationCircleIcon className="h-5 w-5 text-teal-400" aria-hidden="true" />
+                      </div>
+                      <div className="ml-3">
+                        <div className="mt-2 text-sm text-teal-700">
+                          <p>We will support the input type {elem.type} soon in the summary.</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : ["checkbox", "radio"].includes(elem.type) ? (
+                <div className="mb-6">
+                  <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
+                    {elem.label}
+                    <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
+                      Checkbox
+                    </span>
+                  </h2>
+                  <Bar submissions={submissions} schema={form.schema} show={elem.name} />
+                </div>
+              ) : null}
+            </>
+          ))}
+        </div>
+      )}
    </div>
  );
 }
@@ -0,0 +1,13 @@
+# @formbricks/react
+
+## 0.2.0
+
+### Minor Changes
+
+- 493bc3c: Add Input Types: Checkbox, Email, Number, Password, Phone, Radio, Search, Url | Add validations: accepted, email, url
+
+## 0.1.0
+
+### Minor Changes
+
+- 1625495: First release with Text, Textarea, Submit, simple validation and schema support
@@ -0,0 +1 @@
+# Visualize Formbricks Submissions with ease 📊
@@ -0,0 +1,66 @@
+{
+  "name": "@formbricks/charts",
+  "version": "0.0.0",
+  "author": "Formbricks <hola@formbricks.com>",
+  "description": "Visualize Formbricks Form Data with ease",
+  "homepage": "https://formbricks.com",
+  "main": "./dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup --dts && tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "dev": "concurrently \"tsup --dts --external react --watch && generate-tailwind\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@formbricks/tsconfig": "workspace:*",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "concurrently": "^7.5.0",
+    "eslint": "^8.27.0",
+    "eslint-config-formbricks": "workspace:*",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.2.2",
+    "tsup": "^6.4.0",
+    "typescript": "^4.8.4"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1",
+    "recharts": "^2.1.16"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17 || ^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "form",
+    "forms",
+    "visualize",
+    "visualization",
+    "charts",
+    "typescript",
+    "formbricks",
+    "survey",
+    "surveys",
+    "bar",
+    "graph"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formbricks/formbricks"
+  }
+}
@@ -0,0 +1,85 @@
+import { useMemo } from "react";
+import { Bar, BarChart, CartesianGrid, Label, Legend, Tooltip, XAxis, YAxis } from "recharts";
+/* const data = [
+  {
+    name: "Page A",
+    value: 4000,
+  },
+  {
+    name: "Page B",
+    value: 3000,
+  },
+  {
+    name: "Page C",
+    value: 2000,
+  },
+  {
+    name: "Page D",
+    value: 2780,
+  },
+]; */
+
+interface Props {
+  color?: string;
+  submissions: any;
+  schema: any;
+  show: string;
+}
+
+export function FbBar({ color, submissions, schema, show }: Props) {
+  const data = useMemo(() => {
+    const dataDict: any = {};
+    const schemaElem = schema.children.find((e: any) => e.name === show);
+    if (typeof schemaElem === "undefined") {
+      throw Error("key not found in schema");
+    }
+    for (const option of schemaElem.options) {
+      dataDict[option.value] = { name: option.label, value: 0 };
+    }
+    for (const submission of submissions) {
+      if (show in submission.data) {
+        // if submission value is array (checkboxes)
+        if (Array.isArray(submission.data[show])) {
+          for (const value of submission.data[show]) {
+            if (value in dataDict) {
+              dataDict[value] = {
+                ...dataDict[value],
+                value: dataDict[value].value + 1,
+              };
+            }
+          }
+        }
+        // if submission value is string (radio buttons)
+        else if (typeof submission.data[show] == "string") {
+          if (submission.data[show] in dataDict) {
+            dataDict[submission.data[show]] = {
+              ...dataDict[submission.data[show]],
+              value: dataDict[submission.data[show]].value + 1,
+            };
+          }
+        }
+      }
+    }
+    // transform dataDict to desired form
+    const data = [];
+    for (const [key, value] of Object.entries(dataDict)) {
+      data.push(value);
+    }
+    return data;
+  }, [submissions]);
+
+  return (
+    <>
+      <BarChart width={730} height={250} data={data}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis label={{ value: "# answers", angle: -90, position: "insideLeft" }} />
+        <Tooltip />
+        <Legend />
+        <Bar dataKey="value" fill={color || "#00C4B8"} />
+      </BarChart>
+    </>
+  );
+}
+
+export { FbBar as Bar };
@@ -0,0 +1 @@
+export * from "./charts/Bar";
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.formbricks-form {
+  @apply space-y-3;
+}
+
+.formbricks-label {
+  @apply text-base font-medium text-gray-700 font-sans sm:text-sm;
+}
+
+button.formbricks-input {
+  @apply my-2 inline-flex items-center rounded-md border border-transparent bg-slate-600 px-3 py-2 text-base font-medium leading-4 text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 sm:text-sm;
+}
+
+input[type="text"].formbricks-input,
+input[type="number"].formbricks-input,
+input[type="email"].formbricks-input,
+input[type="password"].formbricks-input,
+input[type="search"].formbricks-input,
+input[type="tel"].formbricks-input,
+input[type="url"].formbricks-input {
+  @apply form-input text-base block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+}
+
+input[type="radio"].formbricks-input {
+  @apply h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-500 mr-2;
+}
+
+textarea.formbricks-input {
+  @apply form-textarea text-base font-sans block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+}
+
+.formbricks-help {
+  @apply font-sans text-base sm:text-sm text-gray-500;
+}
+
+.formbricks-prefix-icon {
+  @apply font-sans inline h-4 w-4 -ml-1 mr-2;
+}
+
+.formbricks-messages {
+  @apply m-0 p-0 list-none;
+}
+
+.formbricks-message {
+  @apply font-sans text-base sm:text-sm text-red-500;
+}
+
+.formbricks-legend {
+  @apply text-base font-medium text-gray-700 font-sans sm:text-sm;
+}
+
+.formbricks-fieldset {
+  @apply border-gray-50 rounded-lg  max-w-md;
+}
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("@tailwindcss/forms")({
+      strategy: "class", // only generate classes
+    }),
+  ],
+};
@@ -0,0 +1,5 @@
+{
+  "extends": "@formbricks/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+export default defineConfig({
+  format: ["cjs", "esm"],
+  entry: ["src/index.tsx"],
+  clean: isProduction,
+  splitting: true,
+  dts: true,
+  minify: isProduction,
+});
@@ -79,6 +79,7 @@ importers:

  apps/hq:
    specifiers:
+      '@formbricks/charts': workspace:*
      '@formbricks/database': workspace:*
      '@formbricks/react': workspace:*
      '@formbricks/tailwind-config': workspace:*
@@ -109,6 +110,7 @@ importers:
      swr: ^1.3.0
      typescript: ^4.9.3
    dependencies:
+      '@formbricks/charts': link:../../packages/charts
      '@formbricks/react': link:../../packages/react
      '@formbricks/ui': link:../../packages/ui
      '@headlessui/react': 1.7.4_biqbaboplfbrettd7655fr4n2y
@@ -185,6 +187,35 @@ importers:
      typescript: 4.9.3
      vite: 3.2.4

+  packages/charts:
+    specifiers:
+      '@formbricks/tsconfig': workspace:*
+      '@types/react': ^18.0.25
+      '@types/react-dom': ^18.0.8
+      clsx: ^1.2.1
+      concurrently: ^7.5.0
+      eslint: ^8.27.0
+      eslint-config-formbricks: workspace:*
+      react: ^18.2.0
+      recharts: ^2.1.16
+      tailwindcss: ^3.2.2
+      tsup: ^6.4.0
+      typescript: ^4.8.4
+    dependencies:
+      clsx: 1.2.1
+      recharts: 2.1.16_v2m5e27vhdewzwhryxwfaorcca
+    devDependencies:
+      '@formbricks/tsconfig': link:../tsconfig
+      '@types/react': 18.0.25
+      '@types/react-dom': 18.0.9
+      concurrently: 7.5.0
+      eslint: 8.28.0
+      eslint-config-formbricks: link:../eslint-config-formbricks
+      react: 18.2.0
+      tailwindcss: 3.2.4_postcss@8.4.19
+      tsup: 6.5.0_idbjo54bpfgfu5hzy4ncsoa6f4
+      typescript: 4.9.3
+
  packages/database:
    specifiers:
      '@formbricks/tsconfig': workspace:*
@@ -4557,6 +4588,36 @@ packages:
      '@types/node': 18.11.9
    dev: true

+  /@types/d3-color/2.0.3:
+    resolution: {integrity: sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w==}
+    dev: false
+
+  /@types/d3-interpolate/2.0.2:
+    resolution: {integrity: sha512-lElyqlUfIPyWG/cD475vl6msPL4aMU7eJvx1//Q177L8mdXoVPFl1djIESF2FKnc0NyaHvQlJpWwKJYwAhUoCw==}
+    dependencies:
+      '@types/d3-color': 2.0.3
+    dev: false
+
+  /@types/d3-path/2.0.2:
+    resolution: {integrity: sha512-3YHpvDw9LzONaJzejXLOwZ3LqwwkoXb9LI2YN7Hbd6pkGo5nIlJ09ul4bQhBN4hQZJKmUpX8HkVqbzgUKY48cg==}
+    dev: false
+
+  /@types/d3-scale/3.3.2:
+    resolution: {integrity: sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==}
+    dependencies:
+      '@types/d3-time': 2.1.1
+    dev: false
+
+  /@types/d3-shape/2.1.3:
+    resolution: {integrity: sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==}
+    dependencies:
+      '@types/d3-path': 2.0.2
+    dev: false
+
+  /@types/d3-time/2.1.1:
+    resolution: {integrity: sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==}
+    dev: false
+
  /@types/debug/4.1.7:
    resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
    dependencies:
@@ -6584,6 +6645,10 @@ packages:
      static-extend: 0.1.2
    dev: true

+  /classnames/2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+    dev: false
+
  /clean-css/4.2.4:
    resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
    engines: {node: '>= 4.0'}
@@ -7150,6 +7215,10 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

+  /css-unit-converter/1.1.2:
+    resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
+    dev: false
+
  /css-what/6.1.0:
    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
    engines: {node: '>= 6'}
@@ -7198,6 +7267,58 @@ packages:
    resolution: {integrity: sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==}
    dev: true

+  /d3-array/2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
+  /d3-color/2.0.0:
+    resolution: {integrity: sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==}
+    dev: false
+
+  /d3-format/2.0.0:
+    resolution: {integrity: sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==}
+    dev: false
+
+  /d3-interpolate/2.0.1:
+    resolution: {integrity: sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==}
+    dependencies:
+      d3-color: 2.0.0
+    dev: false
+
+  /d3-path/2.0.0:
+    resolution: {integrity: sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==}
+    dev: false
+
+  /d3-scale/3.3.0:
+    resolution: {integrity: sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-format: 2.0.0
+      d3-interpolate: 2.0.1
+      d3-time: 2.1.1
+      d3-time-format: 3.0.0
+    dev: false
+
+  /d3-shape/2.1.0:
+    resolution: {integrity: sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==}
+    dependencies:
+      d3-path: 2.0.0
+    dev: false
+
+  /d3-time-format/3.0.0:
+    resolution: {integrity: sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==}
+    dependencies:
+      d3-time: 2.1.1
+    dev: false
+
+  /d3-time/2.1.1:
+    resolution: {integrity: sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==}
+    dependencies:
+      d3-array: 2.12.1
+    dev: false
+
  /damerau-levenshtein/1.0.8:
    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
    dev: false
@@ -7262,6 +7383,10 @@ packages:
    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
    engines: {node: '>=0.10.0'}

+  /decimal.js-light/2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+    dev: false
+
  /decode-named-character-reference/1.0.2:
    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
    dependencies:
@@ -7491,6 +7616,12 @@ packages:
      utila: 0.4.0
    dev: true

+  /dom-helpers/3.4.0:
+    resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
+    dependencies:
+      '@babel/runtime': 7.19.4
+    dev: false
+
  /dom-serializer/1.4.1:
    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
    dependencies:
@@ -8611,6 +8742,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: true

+  /eventemitter3/4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
  /events/3.3.0:
    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
    engines: {node: '>=0.8.x'}
@@ -8769,6 +8904,10 @@ packages:
  /fast-deep-equal/3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

+  /fast-equals/2.0.4:
+    resolution: {integrity: sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==}
+    dev: false
+
  /fast-glob/2.2.7:
    resolution: {integrity: sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==}
    engines: {node: '>=4.0.0'}
@@ -9982,6 +10121,10 @@ packages:
      has: 1.0.3
      side-channel: 1.0.4

+  /internmap/1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
  /interpret/2.2.0:
    resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==}
    engines: {node: '>= 0.10'}
@@ -13270,6 +13413,10 @@ packages:
      util-deprecate: 1.0.2
    dev: true

+  /postcss-value-parser/3.3.1:
+    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
+    dev: false
+
  /postcss-value-parser/4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}

@@ -13764,6 +13911,10 @@ packages:
    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
    dev: false

+  /react-lifecycles-compat/3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+    dev: false
+
  /react-loader-spinner/5.3.4_biqbaboplfbrettd7655fr4n2y:
    resolution: {integrity: sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==}
    peerDependencies:
@@ -13787,6 +13938,17 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /react-resize-detector/7.1.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
  /react-responsive-embed/2.1.0_sh5qlbywuemxd2y3xkrw2y2kr4:
    resolution: {integrity: sha512-GzvZ8i1ZRL4YRaTOfIeka5CQSc7mCIZVa0C7brJoA55EQ0A+EsFQT1YOvFVzKOVP33UqoKNMijI1PQ7UtO1Eeg==}
    engines: {node: '>=6'}
@@ -13798,6 +13960,20 @@ packages:
      react: 18.2.0
    dev: false

+  /react-smooth/2.0.1_v2m5e27vhdewzwhryxwfaorcca:
+    resolution: {integrity: sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==}
+    peerDependencies:
+      prop-types: ^15.6.0
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      fast-equals: 2.0.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-transition-group: 2.9.0_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
  /react-toastify/9.1.1_biqbaboplfbrettd7655fr4n2y:
    resolution: {integrity: sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==}
    peerDependencies:
@@ -13809,6 +13985,20 @@ packages:
      react-dom: 18.2.0_react@18.2.0
    dev: false

+  /react-transition-group/2.9.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==}
+    peerDependencies:
+      react: '>=15.0.0'
+      react-dom: '>=15.0.0'
+    dependencies:
+      dom-helpers: 3.4.0
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-lifecycles-compat: 3.0.4
+    dev: false
+
  /react/18.2.0:
    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
    engines: {node: '>=0.10.0'}
@@ -13921,6 +14111,39 @@ packages:
      balanced-match: 1.0.2
    dev: false

+  /recharts-scale/0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+    dependencies:
+      decimal.js-light: 2.5.1
+    dev: false
+
+  /recharts/2.1.16_v2m5e27vhdewzwhryxwfaorcca:
+    resolution: {integrity: sha512-aYn1plTjYzRCo3UGxtWsduslwYd+Cuww3h/YAAEoRdGe0LRnBgYgaXSlVrNFkWOOSXrBavpmnli9h7pvRuk5wg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      prop-types: ^15.6.0
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@types/d3-interpolate': 2.0.2
+      '@types/d3-scale': 3.3.2
+      '@types/d3-shape': 2.1.3
+      classnames: 2.3.2
+      d3-interpolate: 2.0.1
+      d3-scale: 3.3.0
+      d3-shape: 2.1.0
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-is: 16.13.1
+      react-resize-detector: 7.1.2_biqbaboplfbrettd7655fr4n2y
+      react-smooth: 2.0.1_v2m5e27vhdewzwhryxwfaorcca
+      recharts-scale: 0.4.5
+      reduce-css-calc: 2.1.8
+    dev: false
+
  /redent/1.0.0:
    resolution: {integrity: sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==}
    engines: {node: '>=0.10.0'}
@@ -13938,6 +14161,13 @@ packages:
      strip-indent: 3.0.0
    dev: true

+  /reduce-css-calc/2.1.8:
+    resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
+    dependencies:
+      css-unit-converter: 1.1.2
+      postcss-value-parser: 3.3.1
+    dev: false
+
  /refractor/3.6.0:
    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
    dependencies:
				`@@ -0,0 +1 @@`
				`# Visualize Formbricks Submissions with ease 📊`