feat(all): support world chart type

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/docs",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "build": "next build",

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/nextjs-example",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -14,8 +14,8 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tremor/react": "^3.11.1",
-    "@typelytics/posthog": "0.1.2",
-    "@typelytics/tremor": "0.1.2",
+    "@typelytics/posthog": "0.1.3",
+    "@typelytics/tremor": "0.1.3",
     "dotenv-cli": "^7.3.0",
     "next": "14.0.4",
     "react": "18.2.0",

examples/nextjs/src/app/client.tsx

@@ -0,0 +1,6 @@
+"use client";
+import { Chart } from "@typelytics/tremor";
+
+export function Client(props: any) {
+  return <Chart {...props} />;
+}

examples/nextjs/src/app/page.tsx

@@ -2,6 +2,7 @@ import { Chart } from "@typelytics/tremor";
 import { events } from "~/data/events";
 import { PostHog } from "@typelytics/posthog";
 import { DashboardExample } from "./dashboard";
+import { Client } from "./client";
 
 export default async function PageViewLineChart() {
   const posthog = new PostHog({
@@ -18,7 +19,7 @@ export default async function PageViewLineChart() {
       label: "Page View",
     })
     .execute({
-      type: "line",
+      type: "world",
     });
 
   const questionsSolved = await posthog.query().addSeries("Solved Question", {
@@ -31,5 +32,5 @@ export default async function PageViewLineChart() {
     label: "Page View",
   });
 
-  return <Chart {...pageViews} />;
+  return <Client {...pageViews} />;
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Rhys Sullivan",
   "license": "MIT",
   "main": "./dist/index.js",

packages/core/src/index.ts

@@ -6,7 +6,7 @@ export type NumberChartType = "number";
 export type PieChartType = "pie";
 export type BarTotalChartType = "bar-total";
 export type TableChartType = "table";
-// export type WorldChartType = "world";
+export type WorldChartType = "world";
 
 export type ChartType =
   | LineChartType
@@ -16,8 +16,8 @@ export type ChartType =
   | NumberChartType
   | PieChartType
   | BarTotalChartType
-  | TableChartType;
-// | WorldChartType;
+  | TableChartType
+  | WorldChartType;
 
 export type TimeSeriesChartTypes =
   | LineChartType

packages/posthog-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/posthog-generator",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Rhys Sullivan",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,6 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@typelytics/posthog": "0.1.2"
+    "@typelytics/posthog": "0.1.3"
   }
 }

packages/posthog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/posthog",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Rhys Sullivan",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -24,6 +24,6 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@typelytics/core": "0.1.2"
+    "@typelytics/core": "0.1.3"
   }
 }

packages/posthog/src/index.ts

@@ -207,8 +207,8 @@ type PostHogDisplayType =
   | "ActionsBar"
   | "ActionsBarValue"
   | "ActionsLineGraphCumulative"
-  | "ActionsAreaGraph";
-// | "WorldMap";
+  | "ActionsAreaGraph"
+  | "WorldMap";
 
 type FilterLogicalOperator = "AND" | "OR";
 type PropertyFilterValue = string | number | (string | number)[] | null;
@@ -360,7 +360,7 @@ const chartTypeToPostHogType: Record<ChartType, PostHogDisplayType> = {
   number: "BoldNumber",
   pie: "ActionsPie",
   table: "ActionsTable",
-  // world: "WorldMap",
+  world: "WorldMap",
 } as const;
 
 type AllLabelsOrNames<
@@ -442,7 +442,10 @@ class PostHogQuery<
     options = {
       // TODO: Don't reassign in future
       ...this.config.executionOptions,
-      ...options,
+      ...options
+    }
+    if (options.type === 'world') {
+      options.breakdown = '$geoip_country_code'
     }
     const toPostHogPropertyFilter = (group: PostHogFilterGroup<string, Events>) => {
       const asArray = Array.isArray(group.filters) ? group.filters : [group.filters];

packages/tremor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typelytics/tremor",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Rhys Sullivan",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@tremor/react": "^3.11.1",
-    "@typelytics/core": "0.1.2",
-    "react": "18.2.0"
+    "@typelytics/core": "0.1.3",
+    "react": "18.2.0",
+    "react-svg-worldmap": "2.0.0-alpha.16"
   }
 }

packages/tremor/src/chart.tsx

@@ -8,6 +8,7 @@ import {
   NumberChartType,
   PieChartType,
   TableChartType,
+  WorldChartType,
 } from "@typelytics/core";
 import {
   LineChart,
@@ -27,6 +28,7 @@ import {
   Table,
   TableProps,
 } from "./cumulative";
+import { WorldMap, WorldMapProps } from "./world-map";
 
 export function Chart<
   const Type extends ChartType,
@@ -49,7 +51,9 @@ export function Chart<
                 ? TableProps<Labels, IsBreakdown>
                 : Type extends NumberChartType
                   ? NumberChartProps<Labels, IsBreakdown>
-                  : `!!!${Type} is not supported!`) & { type: Type }
+                  : Type extends WorldChartType
+                    ? WorldMapProps<Labels, IsBreakdown>
+                    : `!!!${Type} is not supported!`) & { type: Type }
 ) {
   const type = props.type;
   switch (type) {
@@ -81,6 +85,8 @@ export function Chart<
       );
     case "table":
       return <Table {...(props as TableProps<Labels, IsBreakdown>)} />;
+    case "world":
+      return <WorldMap {...(props as WorldMapProps<Labels, IsBreakdown>)} />;
   }
   throw new Error(`Unknown chart type: ${type}`);
 }

packages/tremor/src/world-map.tsx

@@ -0,0 +1,22 @@
+import { Chart, ChartData, WorldChartType } from "@typelytics/core";
+import { WorldMap as SVGWorldMap } from "react-svg-worldmap";
+
+export type WorldMapProps<Labels extends string> = Pick<
+  Chart<WorldChartType, Labels, true>,
+  "results"
+> &
+  Parameters<typeof SVGWorldMap>[0];
+export function WorldMap<Labels extends string>(props: WorldMapProps<Labels>) {
+  const firstEntry = Object.values(props.results)[0] as Record<
+    Labels,
+    ChartData
+  >;
+  const formattedWorldMap = Object.keys(firstEntry).map((key) => {
+    const casted = firstEntry[key as Labels] as ChartData;
+    return {
+      country: key,
+      value: casted?.aggregated_value ?? 0,
+    };
+  });
+  return <SVGWorldMap data={formattedWorldMap} color="blue" />;
+}