adds DataSaudi test files

Datawheel · Aug 9, 2023 · 6580816 · 6580816
1 parent a78978e
commit 6580816
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 91 deletions.
diff --git a/example/index.html b/example/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html dir="rtl">
 <head>
 <title>Vizbuilder : Dev Environment</title>
 <meta charset="utf-8">

diff --git a/example/index.tsx b/example/index.tsx
@@ -8,6 +8,67 @@ import {useQueryParams} from "./useQueryParams";
 import {useDisclosure} from "@mantine/hooks";
 import {Button, Flex} from "@mantine/core";
 
+const topojsonArray = [
+  {
+    id: "Province",
+    name: "مقاطعة",
+    topojson: "/topojson/SA_regions.json",
+    topojsonId: (d) => d.properties.id,
+  },
+  {
+    id: "Destination Country",
+    name: "دولة",
+    topojson: "/topojson/world-50m.json",
+    topojsonId: (d) => d.id,
+    projection: "geoMiller",
+  },
+  {
+    id: "Source Country",
+    name: "دولة",
+    topojson: "/topojson/world-50m.json",
+    topojsonId: (d) => d.id,
+    projection: "geoMiller",
+  },
+];
+const topojsonConfig = topojsonArray.reduce((acc, item) => ({...acc, [item.id]: item}), {});
+
+const translations = {
+  "ar": {
+    "action_close": "يغلق",
+    "action_enlarge": "تكبير",
+    "action_fileissue": "قدم مشكلة",
+    "action_retry": "أعد المحاولة",
+    "aggregators": {
+      "avg": "متوسط",
+      "max": "أقصى",
+      "min": "الحد الأدنى"
+    },
+    "chart_labels": {
+      "ci": "فاصل الثقة",
+      "moe": "هامش الخطأ",
+      "source": "مصدر",
+      "collection": "مجموعة"
+    },
+    "error": {
+      "detail": "",
+      "message": "التفاصيل: \"{{message}}\".",
+      "title": "خطأ"
+    },
+    "nonidealstate_msg": "لا نتائج",
+    "sentence_connectors": {
+      "and": "و"
+    },
+    "title": {
+      "of_selected_cut_members": "من أعضاء {{members}} المختارين",
+      "top_drilldowns": "لأفضل {{members}}",
+      "by_drilldowns": "بواسطة {{drilldowns}}",
+      "over_time": "متأخر , بعد فوات الوقت",
+      "measure_and_modifier": "{{modifier}} {{measure}}",
+      "total": "مجموع"
+    }
+  }
+}
+
 function Demo() {
   const [isDebugging, setDebugger] = useDisclosure(true);
   const [currentQuery, setCurrentQuery] = useState("");
@@ -29,6 +90,7 @@ function Demo() {
       {result && <Vizwrapper
         queries={result}
         downloadFormats={["svg", "png"]}
+        defaultLocale="ar"
         allowedChartTypes={[
           "barchart",
           "barchartyear",
@@ -40,6 +102,11 @@ function Demo() {
           "stacked",
           "treemap"
         ]}
+        topojsonConfig={topojsonConfig}
+        translations={translations}
+        userConfig={{
+          locale: "ar-SA"
+        }}
       />}
     </Flex>
   );

diff --git a/example/topojson/SA_regions.json b/example/topojson/SA_regions.json
@@ -0,0 +1,16 @@
+{"type":"Topology","arcs":[[[3146,4975],[49,45],[46,88],[17,8],[96,-7],[23,48],[44,38],[8,50],[29,-17],[21,49],[-3,26],[45,26],[19,29],[42,-14],[20,46],[-19,58],[55,68],[28,4],[18,-24],[21,47],[29,0],[64,52],[45,73],[13,36],[70,31],[18,26],[32,-22],[58,45],[27,40],[20,47],[6,54],[51,18],[-2,19],[-33,21],[11,49],[45,10],[16,35],[141,12],[3,64],[-9,56],[14,114],[93,90]],[[4417,6413],[4,-35],[-12,-42],[38,-40],[43,38],[38,2],[57,-26],[21,-22],[71,-47],[33,-34],[22,-41],[59,-73]],[[4791,6093],[45,-68],[28,-56],[8,-41],[-7,-105],[12,-49],[-92,57],[-116,-24],[-24,-36],[-11,-117],[2,-59],[17,-114],[30,-125],[7,-59],[57,-136],[15,-20],[64,-45],[-22,-78],[-25,-27],[-78,45],[-43,6],[-19,-33],[-73,-29],[-90,-22],[-39,-61],[-64,-2],[-52,-18],[-5,-55],[-28,-16],[-37,-1],[-34,25],[-24,-5],[-39,-57],[-61,-49],[-47,0],[-20,-38],[50,-5],[0,-26],[-42,-32],[36,-41],[4,-25],[-38,-82],[-26,-22],[-77,17],[-38,-20],[-18,-36],[-105,1],[-31,58],[-30,81],[-15,4],[-129,0]],[[3567,4553],[5,70],[-52,43],[-21,37],[-79,76],[-55,32],[-15,36],[-35,34],[-76,28],[-13,44],[-40,24],[-40,-2]],[[3500,4138],[-1,132],[19,71],[-12,36],[5,27],[38,59],[18,90]],[[4791,6093],[45,27],[37,3],[40,51]],[[4913,6174],[36,-35],[2,-37],[52,-92],[9,-49],[28,-30],[121,-73],[89,-20],[48,-61],[66,-53],[109,-6],[51,-22],[126,-95],[24,-9],[114,11],[88,-87],[20,-37],[42,-12],[112,-48],[36,-51],[5,-71],[1,-119],[5,-72],[-9,-352],[5,-107],[9,-53],[46,-52],[130,-92],[126,-133],[23,-30],[40,-84],[19,-100],[0,-113],[-10,-88],[-19,-118],[-89,-787],[-27,-245],[-49,-389],[-46,-389],[-27,-251]],[[6219,1723],[-139,-40],[-225,-36],[-314,-31],[-116,-13],[-127,-10],[-200,-21],[-91,1],[-124,20],[-72,35],[-116,85]],[[4695,1713],[-89,81],[-96,100],[-48,84],[-48,68],[21,117],[38,68],[8,42],[-8,26],[-58,65],[-51,85],[-70,64]],[[4294,2513],[-60,105],[-65,95],[-8,44],[24,103],[-7,104],[26,40],[15,56],[-23,170],[-1,34],[12,69],[-15,30],[-77,14],[-66,-20],[-62,17],[-16,23],[8,146],[-52,25],[-115,11],[-66,-2],[-53,17],[-23,33],[-57,141],[-13,83],[-25,57],[-27,95],[-53,48],[5,87]],[[1382,7446],[36,-45],[42,-35],[69,-43],[51,-42],[85,-40],[49,-10],[91,-55],[-3,-19],[-58,-67],[-30,-67],[16,-26],[118,41],[55,-15],[90,-68],[36,-17],[60,-43],[75,-76],[73,-55],[41,-22],[151,-52],[34,-39]],[[2463,6651],[-47,-77],[-39,-27],[-72,-92],[-41,-68],[22,-48],[88,-35],[83,-49],[49,-78],[14,-48],[6,-88],[41,-83],[-5,-81],[-44,16],[-9,27],[-29,17],[-31,-19],[-13,-46],[-50,-61],[-28,-50],[-31,-32]],[[2327,5729],[-59,-29],[-57,-2],[-129,21],[-119,-6],[-58,9],[-113,-29],[-127,30],[-18,47],[-32,40],[-7,56],[-31,24],[-12,58],[20,39],[-4,38],[-31,19],[-24,-9],[-52,51],[-25,6],[-59,-53],[-47,-25],[-49,-7],[-31,38],[-60,-10],[-68,18],[-24,-32],[-80,-57],[-9,-34],[6,-58],[26,-30],[48,7],[25,-32],[-14,-98],[41,-8],[58,-52],[-13,-49],[0,-41],[52,-61],[-12,-46],[30,-32],[39,14],[17,-26],[-26,-23],[8,-25],[50,-54],[35,-51],[12,-50],[-5,-28],[35,-44],[62,-16],[45,-32],[-4,-35],[-46,-37],[3,-57],[27,-77],[-3,-40],[35,-46],[-3,-49],[17,-58],[37,-58],[37,-2],[0,-39],[-88,0],[-6,-39],[-22,-34],[-115,4],[-31,17],[-24,-62],[-27,-24]],[[1328,4459],[-44,77],[-32,15],[-25,49],[43,44],[-7,12],[17,52],[-20,44],[12,17],[-14,47],[-29,26],[-42,64],[-5,47],[-37,32],[0,26],[-35,61],[-15,4],[-42,50],[-37,0],[-28,49],[21,73],[-17,39],[-49,7],[-35,29],[-7,32],[-66,126],[-29,77],[-28,50],[-54,51],[-50,114],[-37,29],[-59,66],[9,46],[-35,67],[-39,23],[-55,81],[-9,51],[-18,25],[-28,69],[-32,11],[-6,32],[-37,52],[-48,27],[28,21],[-56,18],[-21,21],[-55,-6],[-10,-12],[-58,18],[-21,-11],[-38,24],[-35,-38],[-14,25],[39,30],[7,52],[48,123],[15,22],[-14,81],[27,77],[-6,39],[19,61],[10,81],[35,116],[369,-65],[159,-29],[140,117],[18,4],[56,60],[47,68],[26,60],[26,22],[23,43],[338,72]],[[2327,5729],[6,-58],[64,-8],[6,-35],[51,-51],[54,-100],[3,-78],[31,-53],[-3,-194],[13,-30],[-9,-62],[2,-86],[23,-51],[42,-20],[85,-20],[85,-8],[-5,36],[21,38],[46,-14],[65,10],[37,66],[35,20],[47,-11],[38,3],[42,-38],[40,-10]],[[3500,4138],[-70,13],[-44,-15],[-7,-34],[12,-25],[5,-59],[-24,-55],[-33,-21],[-82,-37],[-78,-49],[-15,-42],[84,-53],[-14,-43],[-66,-25],[-43,-36],[-83,-88],[-106,-85],[-61,-98],[-22,0],[-93,32],[-64,-60],[-32,-17],[-65,9],[-9,23],[12,68],[-35,51],[-55,18],[-9,23],[32,78],[4,60],[-18,32],[-65,-5],[-143,-48],[-12,54],[-15,17],[-87,-17],[-24,13],[-57,70],[-33,27],[-41,55],[-42,-13],[-70,-6]],[[1932,3850],[-13,46],[-39,24],[-25,51],[-21,76],[-77,82],[-37,10],[-48,49],[-46,24],[-40,34],[-41,6],[-60,55],[-15,24],[-53,-30],[-35,21],[-36,58],[16,26],[-34,53]],[[4294,2513],[-44,-16],[-90,-62],[-61,18],[-31,0],[-63,-27],[-64,-8],[-36,-41],[-99,-55],[-116,-118],[-54,-38],[-31,4],[-33,39],[-51,112]],[[3521,2321],[-37,33],[-20,-4],[-64,-38],[-46,4],[-74,-28],[-20,11],[-24,68],[-27,28],[-40,-2],[-29,-53],[15,-68],[-1,-35],[-37,-69],[-13,-44],[-16,-15],[-96,-22],[-54,-62],[11,-32],[40,-11],[26,-39],[-7,-68],[12,-48],[-3,-77],[18,-23],[39,-23],[50,-65],[46,-6],[31,16],[35,135],[33,67],[95,18]],[[3364,1869],[21,10],[41,-6],[18,-47],[-18,-93],[29,-67],[0,-25],[-20,-66],[-28,-21],[-65,6],[-30,-5],[-53,-43],[-42,5],[-2,-129],[13,-56],[29,-18],[92,-3],[29,-18],[40,-150],[-20,-85]],[[3398,1058],[-23,-42],[-39,-21],[-26,-57]],[[3310,938],[-6,38],[-45,68],[-10,67],[-21,61],[-27,32],[-46,17],[-23,54],[17,76],[-39,17],[-15,40],[17,47],[-3,28],[-42,18],[-11,29],[-1,47],[-45,71],[7,55],[-17,20],[-56,25],[0,52],[-31,63],[-32,-2],[-42,24],[-23,41],[-1,37],[-77,58],[-41,13],[-50,48],[-32,47],[-115,12],[-65,52],[-62,83],[-54,101],[0,24],[-58,53],[-43,61],[-16,52],[-20,12],[-10,49],[-34,67],[32,30],[-9,86],[-15,6],[-11,79],[-29,70],[-41,61],[-6,43],[40,8],[20,75],[-10,31],[19,27],[17,54],[-20,29],[7,29],[-5,67],[-22,34],[-43,93],[15,28],[-30,56],[-45,12],[-10,97],[-23,17],[-27,53],[-10,70]],[[1600,8400],[492,140],[93,84],[364,-71],[208,-42],[181,-116],[304,-198],[305,-143],[270,-222],[277,-229],[376,-318],[324,-281],[50,-2],[255,-25],[166,-12],[154,-15]],[[5419,6950],[-34,-46],[-38,-10],[-52,-34],[-16,-29],[-23,-1],[-13,-38],[-50,-14],[-64,8],[-80,-7],[-56,2],[-1,-30],[-45,-35],[34,-56],[67,-73],[41,-110],[-2,-21],[-63,-34],[-13,-82],[-22,-28],[1,-27],[-45,-48],[-32,-63]],[[4417,6413],[-22,81],[14,55],[-25,38],[-27,-10],[-68,26],[-46,-21],[-31,12],[-44,-19],[-65,12],[-78,-55],[-48,15],[-103,50],[5,66],[-99,32],[-23,32],[-1,25],[-26,16],[-85,12],[-93,28],[-20,25],[-58,-38],[-34,10],[-152,10],[-26,13],[-63,2]],[[3199,6830],[6,57],[21,63],[33,22],[60,1],[-11,61],[5,36],[-18,20],[-23,52],[4,58],[-44,-3],[0,115],[-8,28],[48,7],[26,44],[97,13],[3,45],[23,18],[65,15],[8,19],[-52,44],[-57,77],[-70,16],[-17,44],[35,49],[-80,18],[-17,18],[-31,-10],[-68,8],[-34,-39],[-21,33],[8,60],[-8,26],[-84,23],[-110,-19],[-121,24],[-52,23],[-25,0],[-34,-41],[-54,-6],[-50,35],[-52,49],[-54,-20],[-49,33],[-71,2],[-48,-13],[-40,31],[-50,10],[-108,-1],[-52,-33],[-52,-9],[-6,18],[-96,5],[-36,-13],[-63,-2],[-39,-20],[-34,1],[0,65],[-9,48],[-29,11],[-41,54],[-48,21],[25,85],[-10,34],[7,76],[-9,18],[12,66]],[[3199,6830],[-149,0],[-96,10],[-56,-8],[-20,9],[-59,-3],[-57,-39],[-49,-18],[-78,-45],[-124,-50],[-48,-35]],[[1382,7446],[78,182],[156,92],[-30,41],[-165,193],[-273,313],[452,133]],[[3521,2321],[-26,-74],[0,-34],[31,-41],[-15,-34],[-80,-60],[-13,-38],[5,-41],[-59,-130]],[[3398,1058],[70,2],[10,-33],[-13,-99],[14,-19],[70,3],[36,-74],[114,-6],[17,-19],[15,-46],[52,-59],[30,-10],[17,13],[23,103],[25,42],[61,36],[14,-17],[-4,-57],[12,-19],[39,-19],[37,-70],[50,-19],[43,-61]],[[4130,630],[-38,-28],[-6,-52],[47,-31],[-59,-38],[7,-27],[-22,-20],[-6,-32],[33,-21],[-42,-87],[20,-38],[34,-38],[-11,-26],[2,-48],[-42,-3],[-12,-60],[-60,-3],[-23,-18],[3,-49],[-57,-11],[-29,14],[4,26],[-19,27],[-11,42],[7,55],[-28,60],[-57,46],[-10,87],[-33,10],[-56,86],[-11,86],[0,41],[-26,18],[-59,71],[-43,44],[-36,21],[-42,44],[-22,6],[-71,73],[-14,40],[-32,41]],[[3391,279],[33,-15],[31,-58],[41,-11],[27,9],[28,31],[14,-35],[31,-27],[-14,-61],[-48,61],[-51,-12],[-54,48],[-38,70]],[[3429,284],[45,4],[3,-64],[-26,18],[-22,42]],[[4695,1713],[-1,-92],[-15,-21],[-42,-20],[-20,-33],[21,-92],[1,-69],[-31,-55],[-54,-31],[-42,-9],[-36,-28],[-14,-45],[-25,-35],[-66,-60],[-79,-94],[-13,-51],[18,-70],[-19,-173],[18,-89],[-26,-74]],[[4270,572],[-63,65],[-30,12],[-47,-19]],[[6219,1723],[-19,-152],[-19,-168],[-38,-341],[-34,-299],[-21,-360]],[[6088,403],[-134,-91],[-87,0],[-118,182],[-181,-27],[-125,9],[-331,45],[-87,55],[-268,0],[-39,-15],[-47,15],[-47,0],[-168,-17],[-21,-39],[-64,4],[-20,20],[-50,-5],[-31,33]],[[5419,6950],[177,-18],[65,22],[426,-54],[57,-90],[9,-99],[49,-61],[-2,-10],[343,5],[33,-22],[-1,-29],[21,-21],[-13,-27],[13,-40],[39,-40],[-8,-51],[26,-43],[38,-34],[38,-57],[-8,-31],[4,-63],[38,-60],[34,19],[63,-44],[73,-9],[13,-46],[-68,0],[34,-35],[10,-36],[36,13],[6,-85],[43,7],[-6,-44],[63,46],[24,-56],[39,-59],[54,-47],[42,-22],[39,-3],[57,-70],[-28,-39],[3,-35],[48,-49],[24,-13],[32,-59],[-10,-103],[-25,-3],[-12,-68],[-38,72],[-35,-38],[6,-67],[49,-2],[0,-49],[37,-74],[19,-15],[-12,-39],[71,-103],[20,4],[49,-43],[18,-55],[-5,-30],[18,-35],[0,-55],[24,-24],[56,-91],[19,-83],[20,13],[56,-108],[31,-23],[49,-18],[97,18],[20,27],[46,36],[8,-34],[-73,-84],[-14,-60],[38,-3],[38,19],[46,-40],[26,2],[0,-70],[156,-213],[114,-161],[198,-275],[354,-47],[225,-31],[271,-38],[357,-52],[34,42],[216,-387],[-89,-307],[-67,-236],[-88,-303],[-71,-247],[-373,-145],[-256,-98],[-355,-137],[-233,-90],[-200,-78],[-271,-54],[-303,-61],[-309,-37],[-197,-23],[-281,-34],[-249,-139],[-192,-107],[-275,-392],[-63,-182]]],"transform":{"scale":[0.002117651182438351,0.0018291755449907233],"translate":[34.57487932291403,16.3795278]},"objects":
+{"SA_regions":
+{"type":"GeometryCollection","geometries":[{"arcs":[[0,1,2,3]],"type":"Polygon",
+"properties":{"name":"Al-Qaseem", "id": 4}},{"arcs":[[4,-3,5,6,7,8,9]],"type":"Polygon",
+"properties":{"name":"Al-Riyadh", "id": 1}},{"arcs":[[10,11,12,13]],"type":"Polygon",
+"properties":{"name":"Tabouk", "id": 7}},{"arcs":[[14,-4,-5,15,16,-13]],"type":"Polygon",
+"properties":{"name":"Al-Madinah Al-Monawarah", "id": 3}},{"arcs":[[-16,-10,17,18,19,20,21]],"type":"Polygon",
+"properties":{"name":"Makkah Al-Mokarramah", "id":2}},{"arcs":[[22,23,-6,-2,24,25]],"type":"Polygon",
+"properties":{"name":"Northern Borders", "id": 9}},{"arcs":[[-26,26,-11,27]],"type":"Polygon",
+"properties":{"name":"Al-Jouf", "id": 13}},{"arcs":[[-27,-25,-1,-15,-12]],"type":"Polygon",
+"properties":{"name":"Hail", "id": 8}},{"arcs":[[28,-19]],"type":"Polygon",
+"properties":{"name":"Al-Baha", "id": 12}},{"arcs":[[[-21,29,30]],[[31]],[[32]]],"type":"MultiPolygon",
+"properties":{"name":"Jazan", "id": 10}},{"arcs":[[-29,-18,-9,33,34,-30,-20]], "type":"Polygon",
+"properties":{"name":"Aseer", "id": 6}},{"arcs":[[-34,-8,35,36]],"type":"Polygon",
+"properties":{"name":"Najran", "id": 11}},{"arcs":[[-24,37,-36,-7]],"type":"Polygon",
+"properties":{"name":"Eastern Region", "id": 5}}]}}}
diff --git a/example/topojson/world-50m.json b/example/topojson/world-50m.json
diff --git a/example/useOlapSchema.ts b/example/useOlapSchema.ts
@@ -1,26 +1,26 @@
-import { Client, Cube, TesseractDataSource } from "@datawheel/olap-client";
-import { useEffect, useState } from "react";
-
-const ds = new TesseractDataSource("/tesseract/");
-export const client = new Client(ds);
-
-export function useOlapSchema() {
-  const [schema, setSchema] = useState<{[k: string]: Cube}>({});
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    client.getCubes().then(cubes => {
-      const schema = Object.fromEntries(
-        cubes.map(cube => [cube.name, cube])
-      );
-      setIsLoading(false);
-      setSchema(schema);
-    }, err => {
-      setIsLoading(false);
-      setError(err.message);
-    });
-  }, []);
-
-  return [schema, isLoading, error] as const;
-}
+import { Client, Cube, TesseractDataSource } from "@datawheel/olap-client";
+import { useEffect, useState } from "react";
+
+const ds = new TesseractDataSource("https://api.datasaudi.datawheel.us/tesseract/");
+export const client = new Client(ds);
+
+export function useOlapSchema() {
+  const [schema, setSchema] = useState<{[k: string]: Cube}>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    client.getCubes().then(cubes => {
+      const schema = Object.fromEntries(
+        cubes.map(cube => [cube.name, cube])
+      );
+      setIsLoading(false);
+      setSchema(schema);
+    }, err => {
+      setIsLoading(false);
+      setError(err.message);
+    });
+  }, []);
+
+  return [schema, isLoading, error] as const;
+}
diff --git a/example/useQuery.ts b/example/useQuery.ts
@@ -1,64 +1,65 @@
-import { Format } from "@datawheel/olap-client";
-import { useEffect, useState } from "react";
-import { buildQueryParams } from "../src/index";
-import { client } from "./useOlapSchema";
-import { QueryParams } from "./useQueryParams";
-
-export function useQuery(query: QueryParams) {
-  const [result, setResult] = useState<VizBldr.QueryResult | null>(null);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    setResult(null);
-
-    client.getCube(query.cube)
-      .then(cube => {
-        const q = cube.query.setFormat(Format.jsonrecords);
-        query.measures.forEach(measure => {
-          q.addMeasure(measure);
-        });
-        query.drilldowns.forEach(level => {
-          q.addDrilldown(level);
-        });
-        return client.execQuery(q, "logiclayer").then(queryForVizbuilder);
-      })
-      .then(result => {
-        console.log(result);
-        setResult(result);
-      }, err => {
-        setError(`${err.stack || err}`);
-      });
-  }, [query]);
-
-  return [result, error, query] as const;
-}
-
-function queryForVizbuilder(
-  {data, query}: OlapClient.Aggregation<any[]>,
-): VizBldr.QueryResult {
-  return {
-    cube: query.cube.toJSON(),
-    dataset: data,
-    params: buildQueryParams(query, {
-      // "Viewed Supplier Product Content": value => value ? "Yes" : "No",
-      // "Viewed Supplier Profile": value => value ? "Yes" : "No",
-      // "Viewed Supplier Website": value => value ? "Yes" : "No",
-      // "Supplier Contact": value => value ? "Yes" : "No",
-      "Average Duration": secondFormatter,
-      "Total Duration": secondFormatter
-    })
-  };
-}
-
-function secondFormatter(value: number) {
-  const days = Math.floor(value / 86400);
-  const hours = Math.floor(value / 3600) % 24;
-  const mins = Math.floor(value / 60) % 60;
-  const secs = Math.floor(value) % 60;
-  return [
-    days > 0 ? `${days}d` : "",
-    days > 0 || hours > 0 ? `${hours}h` : "",
-    days > 0 || hours > 0 || mins > 0 ? `${mins}m` : "",
-    `${Math.floor(secs) !== secs ? secs.toFixed(3) : secs}s`
-  ].filter(Boolean).join("");
-};
+import { Format } from "@datawheel/olap-client";
+import { useEffect, useState } from "react";
+import { buildQueryParams } from "../src/index";
+import { client } from "./useOlapSchema";
+import { QueryParams } from "./useQueryParams";
+
+export function useQuery(query: QueryParams) {
+  const [result, setResult] = useState<VizBldr.QueryResult | null>(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    setResult(null);
+
+    client.getCube(query.cube)
+      .then(cube => {
+        const q = cube.query.setFormat(Format.jsonrecords);
+        q.setLocale("ar");
+        query.measures.forEach(measure => {
+          q.addMeasure(measure);
+        });
+        query.drilldowns.forEach(level => {
+          q.addDrilldown(level);
+        });
+        return client.execQuery(q, "logiclayer").then(queryForVizbuilder);
+      })
+      .then(result => {
+        console.log(result);
+        setResult(result);
+      }, err => {
+        setError(`${err.stack || err}`);
+      });
+  }, [query]);
+
+  return [result, error, query] as const;
+}
+
+function queryForVizbuilder(
+  {data, query}: OlapClient.Aggregation<any[]>,
+): VizBldr.QueryResult {
+  return {
+    cube: query.cube.toJSON(),
+    dataset: data,
+    params: buildQueryParams(query, {
+      // "Viewed Supplier Product Content": value => value ? "Yes" : "No",
+      // "Viewed Supplier Profile": value => value ? "Yes" : "No",
+      // "Viewed Supplier Website": value => value ? "Yes" : "No",
+      // "Supplier Contact": value => value ? "Yes" : "No",
+      "Average Duration": secondFormatter,
+      "Total Duration": secondFormatter
+    })
+  };
+}
+
+function secondFormatter(value: number) {
+  const days = Math.floor(value / 86400);
+  const hours = Math.floor(value / 3600) % 24;
+  const mins = Math.floor(value / 60) % 60;
+  const secs = Math.floor(value) % 60;
+  return [
+    days > 0 ? `${days}d` : "",
+    days > 0 || hours > 0 ? `${hours}h` : "",
+    days > 0 || hours > 0 || mins > 0 ? `${mins}m` : "",
+    `${Math.floor(secs) !== secs ? secs.toFixed(3) : secs}s`
+  ].filter(Boolean).join("");
+};