sync

cube-js · Oct 8, 2024 · c8cad3d · c8cad3d
1 parent 4d55bfe
commit c8cad3d
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 79 deletions.
diff --git a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx b/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx
@@ -53,7 +53,7 @@ const LIMIT_OPTIONS: { key: number; label: string }[] = [
   { key: 1000, label: '1,000' },
   { key: 5000, label: '5,000 (Default)' },
   { key: 50000, label: '50,000 (Max)' },
-];
+] as const;
 const LIMIT_OPTION_VALUES = LIMIT_OPTIONS.map((option) => option.key) as number[];
 
 function timezoneByName(name: string) {

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx
@@ -7,7 +7,6 @@ import {
 } from '@cubejs-client/core';
 import { UseCubeQueryResult } from '@cubejs-client/react';
 import { Skeleton, Tag, tasty } from '@cube-dev/ui-kit';
-import formatDate from 'date-fns/format';
 import { ComponentType, memo, useCallback, useMemo } from 'react';
 import { Col, Row, Statistic, Table } from 'antd';
 import {
@@ -34,28 +33,10 @@ import {
   getChartColorByIndex,
   getChartSolidColorByIndex,
 } from '../utils/chart-colors';
+import { formatDateByGranularity, formatDateByPattern } from '../utils/index';
 
 import { LocalError } from './LocalError';
 
-const FORMAT_MAP = {
-  second: 'HH:mm:ss, yyyy-LL-dd',
-  minute: 'HH:mm, yyyy-LL-dd',
-  hour: 'HH:00, yyyy-LL-dd',
-  day: 'yyyy-LL-dd',
-  week: "'W'w yyyy-LL-dd",
-  month: 'LLL yyyy',
-  quarter: 'QQQ yyyy',
-  year: 'yyyy',
-};
-
-export function formatDateByGranularity(timestamp: Date, granularity?: TimeDimensionGranularity) {
-  return formatDate(timestamp, FORMAT_MAP[granularity ?? 'second']);
-}
-
-export function formatDateByPattern(timestamp: Date, format?: string) {
-  return formatDate(timestamp, format ?? FORMAT_MAP['second']);
-}
-
 function CustomDot(props: any) {
   const { cx, cy, fill } = props;
 

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/GranularityListMember.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/GranularityListMember.tsx
@@ -0,0 +1,56 @@
+import { CalendarEditIcon, CalendarIcon, Text, TooltipProvider } from '@cube-dev/ui-kit';
+import { useRef } from 'react';
+
+import { useHasOverflow } from '../hooks/index';
+import { titleize } from '../utils/index';
+
+import { ListMemberButton } from './ListMemberButton';
+
+export interface GranularityListMemberProps {
+  name: string;
+  title?: string;
+  isCustom?: boolean;
+  isSelected: boolean;
+  onToggle: () => void;
+}
+
+export function GranularityListMember(props: GranularityListMemberProps) {
+  const { name, title, isCustom, isSelected, onToggle } = props;
+  const textRef = useRef<HTMLDivElement>(null);
+
+  const hasOverflow = useHasOverflow(textRef);
+  const isAutoTitle = titleize(name) === title;
+
+  const button = (
+    <ListMemberButton
+      icon={isCustom ? <CalendarEditIcon /> : <CalendarIcon />}
+      data-member="timeDimension"
+      isSelected={isSelected}
+      onPress={onToggle}
+    >
+      <Text ref={textRef} ellipsis>
+        {name}
+      </Text>
+    </ListMemberButton>
+  );
+
+  if (hasOverflow || (!isAutoTitle && isCustom)) {
+    return (
+      <TooltipProvider
+        title={
+          <>
+            <Text preset="t4">{name}</Text>
+            <br />
+            <Text preset="t3">{title}</Text>
+          </>
+        }
+        delay={1000}
+        placement="right"
+      >
+        {button}
+      </TooltipProvider>
+    );
+  } else {
+    return button;
+  }
+}
diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/ListMember.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/ListMember.tsx
@@ -11,7 +11,7 @@ import {
 import { TCubeMeasure, TCubeDimension, TCubeSegment, Cube, MemberType } from '@cubejs-client/core';
 import { PlusOutlined } from '@ant-design/icons';
 
-import { getTypeIcon } from '../utils';
+import { getTypeIcon, titleize } from '../utils';
 import { PrimaryKeyIcon } from '../icons/PrimaryKeyIcon';
 import { NonPublicIcon } from '../icons/NonPublicIcon';
 import { ItemInfoIcon } from '../icons/ItemInfoIcon';
@@ -60,6 +60,8 @@ export function ListMember(props: ListMemberProps) {
   const description = member.description;
 
   const hasOverflow = useHasOverflow(textRef);
+  const isAutoTitle = titleize(member.name) === title;
+
   const button = (
     <ListMemberWrapper>
       <ListMemberButton
@@ -122,11 +124,15 @@ export function ListMember(props: ListMemberProps) {
     </ListMemberWrapper>
   );
 
-  return hasOverflow ? (
+  return hasOverflow || !isAutoTitle ? (
     <TooltipProvider
       title={
         <>
-          <b>{name}</b>
+          <Text preset="t4">
+            <b>{name}</b>
+          </Text>
+          <br />
+          <Text preset="t4">{title}</Text>
         </>
       }
       delay={1000}

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/SidePanelCubeItem.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/SidePanelCubeItem.tsx
@@ -16,6 +16,7 @@ import { ArrowIcon } from '../icons/ArrowIcon';
 import { NonPublicIcon } from '../icons/NonPublicIcon';
 import { ItemInfoIcon } from '../icons/ItemInfoIcon';
 import { useHasOverflow, useFilteredMembers } from '../hooks';
+import { titleize } from '../utils/index';
 
 import { ListMember } from './ListMember';
 import { TimeListMember } from './TimeListMember';
@@ -366,6 +367,7 @@ export function SidePanelCubeItem({
   }, [segments.join(','), query?.segments?.join(','), showMembers, mode, meta]);
 
   const hasOverflow = useHasOverflow(textRef);
+  const isAutoTitle = titleize(name) === title;
 
   const noVisibleMembers = !dimensions.length && !measures.length && !segments.length;
 
@@ -468,12 +470,16 @@ export function SidePanelCubeItem({
   return (
     <Space flow="column" gap="0">
       <CubeWrapper>
-        {hasOverflow ? (
+        {hasOverflow || !isAutoTitle ? (
           <TooltipProvider
             delay={1000}
             title={
               <>
-                <b>{name}</b>
+                <Text preset="t4">
+                  <b>{name}</b>
+                </Text>
+                <br />
+                <Text preset="t4">{title}</Text>
               </>
             }
             placement="right"

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/TimeListMember.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/TimeListMember.tsx
@@ -1,24 +1,17 @@
-import { useRef, useState } from 'react';
-import {
-  Action,
-  Flex,
-  Space,
-  Text,
-  TimeIcon,
-  CalendarIcon,
-  CalendarEditIcon,
-  TooltipProvider,
-} from '@cube-dev/ui-kit';
+import { useMemo, useRef, useState } from 'react';
+import { Flex, Space, Text, TimeIcon, TooltipProvider } from '@cube-dev/ui-kit';
 import { Cube, TCubeDimension, TimeDimensionGranularity } from '@cubejs-client/core';
 
+import { GranularityListMember } from '@/modules/playground/components/QueryBuilder/components/GranularityListMember';
+
 import { ArrowIcon } from '../icons/ArrowIcon';
 import { NonPublicIcon } from '../icons/NonPublicIcon';
 import { ItemInfoIcon } from '../icons/ItemInfoIcon';
 import { useHasOverflow } from '../hooks/has-overflow';
+import { titleize } from '../utils/index';
 
 import { ListMemberButton } from './ListMemberButton';
 import { FilterByMemberButton } from './FilterByMemberButton';
-import { MemberBadge } from './Badge';
 import { FilteredLabel } from './FilteredLabel';
 
 interface ListMemberProps {
@@ -70,8 +63,21 @@ export function TimeListMember(props: ListMemberProps) {
 
   const customGranularities =
     member.type === 'time' && member.granularities ? member.granularities.map((g) => g.name) : [];
+  const customGranularitiesTitleMap = useMemo(() => {
+    return (
+      member.type === 'time' &&
+      member.granularities?.reduce(
+        (map, granularity) => {
+          map[granularity.name] = granularity.title;
+
+          return map;
+        },
+        {} as Record<string, string>
+      )
+    );
+  }, [member.type === 'time' ? member.granularities : null]);
   const memberGranularities = customGranularities.concat(PREDEFINED_GRANULARITIES);
-  const isGranularitySelectedMap = {};
+  const isGranularitySelectedMap: Record<string, boolean> = {};
   memberGranularities.forEach((granularity) => {
     isGranularitySelectedMap[granularity] = isSelected(granularity);
   });
@@ -80,6 +86,8 @@ export function TimeListMember(props: ListMemberProps) {
   open = isCompact ? false : open;
 
   const hasOverflow = useHasOverflow(textRef);
+  const isAutoTitle = titleize(member.name) === title;
+
   const button = (
     <ListMemberButton
       icon={
@@ -106,22 +114,7 @@ export function TimeListMember(props: ListMemberProps) {
       <Text ref={textRef} ellipsis>
         {filterString ? <FilteredLabel text={name} filter={filterString} /> : name}
       </Text>
-      {(isCompact || !open) && selectedGranularity ? (
-        <TooltipProvider
-          delay={1000}
-          title="Click the granularity label to remove it from the query"
-        >
-          <Action
-            onPress={() => {
-              onGranularityToggle(member.name, selectedGranularity);
-            }}
-          >
-            <MemberBadge isSpecial type="timeDimension">
-              {selectedGranularity}
-            </MemberBadge>
-          </Action>
-        </TooltipProvider>
-      ) : null}
+
       <Space gap=".5x">
         <Space gap="1x">
           {description ? <ItemInfoIcon title={title} description={description} /> : undefined}
@@ -137,30 +130,34 @@ export function TimeListMember(props: ListMemberProps) {
     </ListMemberButton>
   );
 
-  const granularityItems = (items, icon) => {
-    if (!open || isCompact) {
-      return null;
-    }
-
-    return items.map((granularity, i) => (
-      <ListMemberButton
-        key={`${name}.${granularity}`}
-        icon={icon}
-        data-member="timeDimension"
-        isSelected={isGranularitySelectedMap[granularity]}
-        onPress={() => {
-          onGranularityToggle(member.name, granularity);
-          setOpen(false);
-        }}
-      >
-        <Text ellipsis>{granularity}</Text>
-      </ListMemberButton>
-    ));
+  const granularityItems = (items: string[], isCustom?: boolean) => {
+    return items.map((granularity: string) => {
+      if (
+        ((!open || isCompact) && !isGranularitySelectedMap[granularity]) ||
+        !customGranularitiesTitleMap
+      ) {
+        return null;
+      }
+
+      return (
+        <GranularityListMember
+          key={`${name}.${granularity}`}
+          name={granularity}
+          title={customGranularitiesTitleMap[granularity]}
+          isCustom={isCustom}
+          isSelected={isGranularitySelectedMap[granularity]}
+          onToggle={() => {
+            onGranularityToggle(member.name, granularity);
+            setOpen(false);
+          }}
+        />
+      );
+    });
   };
 
   return (
     <>
-      {hasOverflow ? (
+      {hasOverflow || !isAutoTitle ? (
         <TooltipProvider
           title={
             <>
@@ -175,7 +172,7 @@ export function TimeListMember(props: ListMemberProps) {
       ) : (
         button
       )}
-      {open || isCompact ? (
+      {open || isCompact || selectedGranularity ? (
         <Flex flow="column" gap="1bw" padding="4.5x left">
           {open && !isCompact ? (
             <ListMemberButton
@@ -190,8 +187,8 @@ export function TimeListMember(props: ListMemberProps) {
               <Text ellipsis>value</Text>
             </ListMemberButton>
           ) : null}
-          {granularityItems(customGranularities, <CalendarEditIcon />)}
-          {granularityItems(PREDEFINED_GRANULARITIES, <CalendarIcon />)}
+          {granularityItems(customGranularities, true)}
+          {granularityItems(PREDEFINED_GRANULARITIES)}
         </Flex>
       ) : null}
     </>

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/utils/format-date-by-granularity.tsx b/packages/cubejs-playground/src/QueryBuilderV2/utils/format-date-by-granularity.tsx
@@ -13,7 +13,11 @@ const FORMAT_MAP = {
 };
 
 export function formatDateByGranularity(timestamp: Date, granularity?: TimeDimensionGranularity) {
-  return formatDate(timestamp, FORMAT_MAP[granularity ?? 'second']);
+  return formatDate(
+    timestamp,
+    FORMAT_MAP[(granularity as Exclude<TimeDimensionGranularity, string>) ?? 'second'] ??
+      FORMAT_MAP['second']
+  );
 }
 
 export function formatDateByPattern(timestamp: Date, format?: string) {

diff --git a/packages/cubejs-playground/src/QueryBuilderV2/utils/index.ts b/packages/cubejs-playground/src/QueryBuilderV2/utils/index.ts
@@ -11,3 +11,4 @@ export * from './use-commit-press';
 export * from './uncapitalize';
 export * from './uniq-array';
 export * from './graphql-converters';
+export * from './titleize';