examples: web-analytics use meta for human readable measures' titles

Author: keydunov

examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useParams } from "react-router-dom";
 import { useQuery } from "@apollo/react-hooks";
 import Button from "@material-ui/core/Button";
+import { CubeContext } from "@cubejs-client/react";
 import Grid from "@material-ui/core/Grid";
 import { GET_CUSTOM_REPORT } from "../graphql/queries";
 import OverTimeChart from "../components/OverTimeChart";
@@ -11,13 +12,22 @@ import { Link } from "react-router-dom";
 
 const CustomReportPage = ({ withTime }) => {
   const [activeMeasure, setActiveMeasure] = useState(null);
+  const [meta, setMeta] = useState(null);
   const { id } = useParams();
+  const cubejsApi = useContext(CubeContext).cubejsApi;
   const { loading, error, data } = useQuery(GET_CUSTOM_REPORT, {
     variables: {
       id: id
     },
   });
-  if (loading || error) {
+  useEffect(() => {
+    (async function loadMeta() {
+      const meta = await cubejsApi.meta();
+      setMeta(meta);
+    })();
+  }, []);
+
+  if (loading || error || !meta) {
     return "Loading";
   }
 
@@ -51,10 +61,10 @@ const CustomReportPage = ({ withTime }) => {
           title={
             measures.length > 1 ?
               <Dropdown
-                value={finalActiveMeasure}
+                value={meta.resolveMember(finalActiveMeasure, "measures").shortTitle}
                 options={
                   measures.reduce((out, measure) => {
-                    out[measure] = () => setActiveMeasure(measure)
+                    out[meta.resolveMember(measure, "measures").shortTitle] = () => setActiveMeasure(measure)
                     return out;
                   }, {})
                 }

examples/web-analytics/dashboard-app/src/pages/CustomReportsBuilderPage.js

@@ -55,7 +55,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
+const CustomReportsBuilderPage = ({ history }) => {
   const { id } = useParams();
   const [addCustomReport] = useMutation(CREATE_CUSTOM_REPORT, {
     refetchQueries: [
@@ -92,7 +92,6 @@ const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
         <QueryBuilder
           query={(data && data.customReport.query && JSON.parse(data.customReport.query)) || {}}
           wrapWithQueryRenderer={false}
-          cubejsApi={cubejsApi}
           render={({
             measures, availableMeasures, updateMeasures,
             dimensions, availableDimensions, updateDimensions,

examples/web-analytics/dashboard-app/src/pages/ReportPage.js

@@ -71,7 +71,7 @@ const ReportPage = ({ report: Component }) => {
   useEffect(() => {
     setUserPreference('daterange', [beginDate, endDate]);
     setUserPreference('segment', segment);
-  })
+  }, [beginDate, endDate, segment])
 
   return (
     <Grid

examples/web-analytics/dashboard-app/yarn.lock

@@ -1074,7 +1074,7 @@
     url-search-params-polyfill "^7.0.0"
     uuid "^3.4.0"
 
-"@cubejs-client/react@^0.18.7":
+"@cubejs-client/react@^0.18.4":
   version "0.18.4"
   resolved "https://registry.yarnpkg.com/@cubejs-client/react/-/react-0.18.4.tgz#82637946d81d94dde16701f7759f10ff29e6be39"
   integrity sha512-DVOs+UzQTte5bAGVnFJzNlYmPJLcGIap4jrsYIfaCBrf1D4QMgMg1jRU13Dg1AUH5IyKt/z4yxOjZ/OXXjAhGA==