initial attempt at a stargazer page

docusaurus/docs/reference/developer/stargazers/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Stargazers Over Time
+---
+
+import StarChart from '../../../../src/components/StarChart';
+
+<StarChart />

docusaurus/package.json

@@ -14,6 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@canvasjs/charts": "^3.7.26",
+    "@canvasjs/react-charts": "^1.0.0",
     "@docusaurus/core": "^2.4.3",
     "@docusaurus/plugin-client-redirects": "^2.4.3",
     "@docusaurus/plugin-sitemap": "^2.4.3",

docusaurus/src/components/StarChart/index.js

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import CanvasJSReact from '@canvasjs/react-charts';
+if (ExecutionEnvironment.canUseDOM) {
+  require('@canvasjs/react-charts');
+}
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import zrok from './all.zrok.stargazers.json'
+import ziti from './all.ziti.stargazers.json'
+import others from './all.other.stargazers.json'
+
+var CanvasJS = CanvasJSReact.CanvasJS;
+var CanvasJSChart = CanvasJSReact.CanvasJSChart;
+
+export default function StarChart(props) {
+    if (!ExecutionEnvironment.canUseDOM) {
+      return <p>sorry charlie</p>;
+    } else {
+      console.info("you got this");
+    }
+
+    const zitiData = ziti.map((entry, index) => {
+      const dateObject = new Date(entry.date);
+      const r = {
+        x: dateObject,
+        y: index + 1
+      };
+      return r;
+    });
+    const zrokData = zrok.map((entry, index) => {
+      const dateObject = new Date(entry.date);
+      const r = {
+        x: dateObject,
+        y: index + 1
+      };
+      return r;
+    });
+    const othersData = others.map((entry, index) => {
+      const dateObject = new Date(entry.date);
+      const r = {
+        x: dateObject,
+        y: index + 1
+      };
+      return r;
+    });
+
+    const lastRow = {
+      x: new Date(new Date().setMonth(new Date().getMonth() + 1)), // Add an extra month to the current date
+      y: null
+    };
+
+    const options = {      
+      zoomEnabled: true,
+      panEnabled: true,
+      title: {
+        //text: "OpenZiti Combined Stars Over Time"
+      },
+      axisX: {
+        title: "Date / Time"
+      },
+      axisY: {
+        title: "Stargazers"
+      },
+      toolTip: {
+        shared: true
+      },
+      legend: {
+        cursor: "pointer",
+        verticalAlign: "top",
+        horizontalAlign: "center",
+        dockInsidePlotArea: false,
+      },
+      data: [{
+        name: "ziti",
+        type: "line",
+        connectNullData: true,
+        showInLegend: true,
+        xValueType: "dateTime",
+        dataPoints: zitiData
+      },
+      {
+        name: "zrok",
+        type: "line",
+        connectNullData: true,
+        showInLegend: true,
+        xValueType: "dateTime",
+        dataPoints: zrokData
+      },
+      {
+        name: "all others",
+        type: "line",
+        connectNullData: true,
+        showInLegend: true,
+        xValueType: "dateTime",
+        dataPoints: othersData
+      }
+      ]
+    }
+
+    othersData.push(lastRow);
+
+    const [chartData, setChartData] = useState(null);
+    return (
+      <BrowserOnly fallback={<div>Loading data...</div>}>
+        {() => {
+            useEffect(() => {
+              const fetchData = async () => {
+                try {
+                  // Simulate an API request (replace with your actual API call)
+                  // const response = await fetch('https://api.example.com/chart-data');
+                  // const result = await response.json();
+                  // Set the chart data in state
+                  setChartData(othersData);
+                } catch (error) {
+                  console.error('Error fetching chart data:', error);
+                }
+              };
+
+              fetchData();
+            }, []);
+
+            return (
+              <div>
+                {chartData ? (
+                  <CanvasJSChart options={options} />
+                ) : (
+                  <p>Loading chart data...</p>
+                )}
+              </div>
+            );
+        }}
+      </BrowserOnly>
+    );
+}

docusaurus/yarn.lock

@@ -1267,6 +1267,16 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
   integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
 
+"@canvasjs/charts@^3.7.26":
+  version "3.7.26"
+  resolved "https://registry.yarnpkg.com/@canvasjs/charts/-/charts-3.7.26.tgz#6138e5a5355b5bb1667a6ddda3838aa3ace45c92"
+  integrity sha512-4BcaB0ko64NH+A4OHlKjONBEMaPDRt2V7XYTJ+lFcn0MlzzkzhWhNXGYdPL3wN9uIEkBw/1yaNZuU55cadPVpw==
+
+"@canvasjs/react-charts@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@canvasjs/react-charts/-/react-charts-1.0.0.tgz#84e97e1e3bd045cf345ac9dbe270edf11446af51"
+  integrity sha512-wGI675kz65owAwXZWzJULK9GXKCrPV59+CCawXP801f4rmYGmPskdtGrczgJhA8ThFEgIvq3K4qrkpLDPSmxCQ==
+
 "@colors/[email protected]":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"