@takaro/lib-components 0.4.8 → 0.4.10

package/src/components/charts/GeoMercator/index.tsx

@@ -13,156 +13,12 @@ import { useCallback } from 'react';
 import { localPoint } from '@visx/event';
 import { ZoomControls } from '../ZoomControls';
 import { alpha2ToAlpha3 } from './iso3166-alpha2-to-alpha3';
-import { Flag } from '../../visual/Flag';
-
-const alpha3ToAlpha2: Record<string, string> = Object.entries(alpha2ToAlpha3).reduce(
-  (acc, [alpha2, alpha3]) => {
-    acc[alpha3] = alpha2;
-    return acc;
-  },
-  {} as Record<string, string>,
-);
-
-const SidebarContainer = styled.div`
-  width: 320px;
-  min-width: 320px;
-  flex-shrink: 0;
-  height: 100%;
-  overflow: auto;
-  background-color: ${({ theme }) => theme.colors.backgroundAlt};
-  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  border-radius: ${({ theme }) => theme.borderRadius.medium};
-  padding: ${({ theme }) => theme.spacing['3']};
-  margin-left: ${({ theme }) => theme.spacing['4']};
-`;
-
-const SidebarTitle = styled.h3`
-  margin: 0 0 ${({ theme }) => theme.spacing['2']} 0;
-  font-size: ${({ theme }) => theme.fontSize.tiny};
-  font-weight: 500;
-  color: ${({ theme }) => theme.colors.textAlt};
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-`;
-
-const CountryGrid = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: ${({ theme }) => theme.spacing['2']};
-`;
-
-const CountryTable = styled.div`
-  display: table;
-  width: 100%;
-  font-size: ${({ theme }) => theme.fontSize.small};
-  border-collapse: collapse;
-`;
-
-const CountryRow = styled.div`
-  display: table-row;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundAccent};
-  }
-
-  &:last-child > div {
-    border-bottom: none;
-  }
-`;
-
-const CountryCell = styled.div`
-  display: table-cell;
-  padding: 2px 0;
-  vertical-align: middle;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  color: ${({ theme }) => theme.colors.text};
-  line-height: 1.3;
-`;
-
-const FlagCell = styled(CountryCell)`
-  width: 20px;
-  text-align: center;
-  padding-right: 4px;
-`;
-
-const CountryCell2 = styled(CountryCell)`
-  padding-right: 4px;
-  font-weight: 500;
-  font-size: ${({ theme }) => theme.fontSize.tiny};
-`;
-
-const CountCell = styled(CountryCell)`
-  text-align: right;
-  font-weight: 600;
-  color: ${({ theme }) => theme.colors.primary};
-  width: 20px;
-  font-size: ${({ theme }) => theme.fontSize.tiny};
-`;
-
-const FlexContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  position: relative;
-  height: 100%;
-  width: 100%;
-`;
-
-const MapContainer = styled.div`
-  flex: 1;
-  position: relative;
-`;
 
 const StyledTooltip = styled(Tooltip)`
   text-align: center;
   transform: translate(-50%);
 `;
 
-interface CountrySidebarProps<T> {
-  data: T[];
-  xAccessor: (d: T) => string;
-  yAccessor: (d: T) => number;
-}
-
-const CountrySidebar = <T,>({ data, xAccessor, yAccessor }: CountrySidebarProps<T>) => {
-  const sortedData = [...data].sort((a, b) => yAccessor(b) - yAccessor(a));
-
-  // Split data into two columns
-  const midPoint = Math.ceil(sortedData.length / 2);
-  const leftColumnData = sortedData.slice(0, midPoint);
-  const rightColumnData = sortedData.slice(midPoint);
-
-  const renderCountryTable = (columnData: T[]) => (
-    <CountryTable>
-      {columnData.map((item, index) => {
-        const countryCode = xAccessor(item);
-        const playerCount = yAccessor(item);
-        const alpha2Code = countryCode.length === 3 ? alpha3ToAlpha2[countryCode] : countryCode;
-        // Prefer 2-letter country codes for display if available
-        const displayCode = alpha2Code || countryCode;
-
-        return (
-          <CountryRow key={`${countryCode}-${index}`}>
-            <FlagCell>{alpha2Code && <Flag countryCode={alpha2Code} size={1} />}</FlagCell>
-            <CountryCell2>{displayCode}</CountryCell2>
-            <CountCell>{playerCount}</CountCell>
-          </CountryRow>
-        );
-      })}
-    </CountryTable>
-  );
-
-  return (
-    <SidebarContainer>
-      <SidebarTitle>Countries ({sortedData.length})</SidebarTitle>
-      <CountryGrid>
-        {renderCountryTable(leftColumnData)}
-        {renderCountryTable(rightColumnData)}
-      </CountryGrid>
-    </SidebarContainer>
-  );
-};
-
 interface FeatureShape {
   type: 'Feature';
   id: string;
@@ -186,7 +42,6 @@ export interface GeoMercatorProps<T> {
   tooltipAccessor?: (d: T) => string;
   showZoomControls?: boolean;
   allowZoomAndDrag?: boolean;
-  showCountrySidebar?: boolean;
 }
 
 type InnerGeoMercator<T> = InnerChartProps & GeoMercatorProps<T>;
@@ -200,7 +55,6 @@ export const GeoMercator = <T,>({
   tooltipAccessor,
   showZoomControls = false,
   allowZoomAndDrag = false,
-  showCountrySidebar = false,
 }: GeoMercatorProps<T>) => {
   return (
     <ParentSize>
@@ -216,7 +70,6 @@ export const GeoMercator = <T,>({
           allowZoomAndDrag={allowZoomAndDrag}
           showZoomControls={showZoomControls}
           tooltipAccessor={tooltipAccessor}
-          showCountrySidebar={showCountrySidebar}
         />
       )}
     </ParentSize>
@@ -233,20 +86,13 @@ const Chart = <T,>({
   name,
   allowZoomAndDrag,
   showZoomControls,
-  showCountrySidebar,
 }: InnerGeoMercator<T>) => {
   const theme = useTheme();
   const { hideTooltip, showTooltip, tooltipData, tooltipLeft = 0, tooltipTop = 0 } = useTooltip<T>();
 
-  // Calculate sidebar width including margin
-  const sidebarTotalWidth = showCountrySidebar ? 320 + parseInt(theme.spacing['4']) : 0;
-
-  // Adjust map width to account for sidebar
-  const mapWidth = width - sidebarTotalWidth;
-
-  const centerX = mapWidth / 2;
+  const centerX = width / 2;
   const centerY = height / 2;
-  const scale = Math.min(mapWidth, height) * 0.25;
+  const scale = Math.min(width, height) * 0.25;
 
   const colorScale = scaleLinear({
     domain: [0, Math.max(...data.map((d) => yAccessor(d)))],
@@ -277,7 +123,7 @@ const Chart = <T,>({
     <svg
       id={name}
       name={name}
-      width={mapWidth}
+      width={width}
       height={height}
       ref={zoom?.containerRef}
       style={{
@@ -285,7 +131,7 @@ const Chart = <T,>({
         cursor: allowZoomAndDrag && zoom ? (zoom.isDragging ? 'grabbing' : 'grab') : 'default',
       }}
     >
-      <rect x={0} y={0} width={mapWidth} height={height} fill={theme.colors.background} rx={10} />
+      <rect x={0} y={0} width={width} height={height} fill={theme.colors.background} rx={10} />
       <Mercator<FeatureShape>
         data={world.features}
         scale={zoom?.transformMatrix.scaleX || scale}
@@ -327,7 +173,7 @@ const Chart = <T,>({
         <rect
           x={0}
           y={0}
-          width={mapWidth}
+          width={width}
           height={height}
           rx={14}
           fill="transparent"
@@ -346,23 +192,20 @@ const Chart = <T,>({
   );
 
   const renderContent = (zoomProps?: any) => (
-    <FlexContainer>
-      <MapContainer>
-        {renderMap(zoomProps)}
-        {showZoomControls && zoomProps && <ZoomControls zoom={zoomProps} />}
-        {tooltipData && (
-          <StyledTooltip top={tooltipTop} left={tooltipLeft} style={getDefaultTooltipStyles(theme)}>
-            {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
-          </StyledTooltip>
-        )}
-      </MapContainer>
-      {showCountrySidebar && <CountrySidebar data={data} xAccessor={xAccessor} yAccessor={yAccessor} />}
-    </FlexContainer>
+    <>
+      {renderMap(zoomProps)}
+      {showZoomControls && zoomProps && <ZoomControls zoom={zoomProps} />}
+      {tooltipData && (
+        <StyledTooltip top={tooltipTop} left={tooltipLeft} style={getDefaultTooltipStyles(theme)}>
+          {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
+        </StyledTooltip>
+      )}
+    </>
   );
 
   return allowZoomAndDrag ? (
     <Zoom<SVGSVGElement>
-      width={mapWidth}
+      width={width}
       height={height}
       scaleXMin={100}
       scaleXMax={1000}

package/src/components/charts/Heatmap/Heatmap.stories.tsx

@@ -2,53 +2,187 @@ import React from 'react';
 import { HeatMap, HeatmapProps } from '.';
 import { Meta, StoryFn } from '@storybook/react';
 import { styled } from '../../../styled';
-import { DateTime } from 'luxon';
 
 export default {
   title: 'Charts/Heatmap',
   component: HeatMap,
-} as Meta<HeatmapProps<number>>;
+  args: {
+    showMonthLabels: true,
+    showDayLabels: true,
+  },
+  argTypes: {
+    showMonthLabels: { control: 'boolean' },
+    showDayLabels: { control: 'boolean' },
+  },
+} as Meta<HeatmapProps<ContributionData>>;
 
 const Wrapper = styled.div`
-  height: 250px;
-  width: 250px;
+  height: 200px;
+  width: 100%;
 `;
 
-interface Data {
-  timestamp: string;
-  value: boolean;
+interface ContributionData {
+  date: Date;
+  count: number;
 }
 
-// this represents a month of a player's online status
-const data: Data[] = Array.from({ length: 30 }, (_, i) => ({
-  timestamp: DateTime.local().minus({ days: i }).toISODate()!,
-  value: Math.random() > 0.5,
-}));
-
-export const Default: StoryFn<HeatmapProps<number>> = () => {
-  // Extract the day of the week from the timestamp (0 for Sunday, 6 for Saturday)
-  const yAccessor = (d: Data) => DateTime.fromISO(d.timestamp).weekday;
-  // Extract the week of the month from the timestamp
-  const xAccessor = (d: Data): number => Math.floor(DateTime.fromISO(d.timestamp).day / 7);
-  // Convert boolean value to 0 or 1 because the heatmap expects a number
-  const zAccessor = (d: Data) => (d.value ? 1 : 0);
-
-  const tooltipAccessor = (d: Data) => {
-    const date = DateTime.fromISO(d.timestamp);
-    // format: "Sun, 10 jan: online
-    return `${date.weekdayShort}, ${date.day} ${date.monthShort}: ${d.value ? 'online' : 'offline'}`;
-  };
+// Generate realistic contribution data (GitHub-style)
+const generateContributionData = (): ContributionData[] => {
+  const data: ContributionData[] = [];
+  const endDate = new Date();
+  const startDate = new Date();
+  startDate.setDate(startDate.getDate() - 364); // 1 year ago
+
+  // Generate contributions with realistic patterns
+  for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+    const dayOfWeek = d.getDay();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+
+    // Simulate realistic patterns:
+    // - Less activity on weekends
+    // - Random spikes in activity
+    // - Some periods of no activity
+    let count = 0;
+
+    if (Math.random() > 0.3) {
+      if (isWeekend) {
+        count = Math.floor(Math.random() * 5);
+      } else {
+        count = Math.floor(Math.random() * 15);
+      }
+      if (Math.random() > 0.9) {
+        count += Math.floor(Math.random() * 20);
+      }
+    }
+
+    data.push({
+      date: new Date(d),
+      count,
+    });
+  }
+
+  return data;
+};
+
+export const Default: StoryFn<HeatmapProps<ContributionData>> = (args) => {
+  const data = React.useMemo(() => generateContributionData(), []);
 
   return (
     <Wrapper>
-      <HeatMap<Data>
+      <HeatMap<ContributionData>
+        name="contributions"
+        data={data}
+        dateAccessor={(d) => d.date}
+        valueAccessor={(d) => d.count}
+        showMonthLabels={args.showMonthLabels}
+        showDayLabels={args.showDayLabels}
+      />
+    </Wrapper>
+  );
+};
+
+export const LastThreeMonths: StoryFn<HeatmapProps<ContributionData>> = (args) => {
+  const data = React.useMemo(() => {
+    const result: ContributionData[] = [];
+    const endDate = new Date();
+    const startDate = new Date();
+    startDate.setMonth(startDate.getMonth() - 3);
+
+    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+      result.push({
+        date: new Date(d),
+        count: Math.floor(Math.random() * 10),
+      });
+    }
+
+    return result;
+  }, []);
+
+  const startDate = new Date();
+  startDate.setMonth(startDate.getMonth() - 3);
+
+  return (
+    <Wrapper>
+      <HeatMap<ContributionData>
+        name="contributions-3months"
+        data={data}
+        dateAccessor={(d) => d.date}
+        valueAccessor={(d) => d.count}
+        startDate={startDate}
+        endDate={new Date()}
+        showMonthLabels={args.showMonthLabels}
+        showDayLabels={args.showDayLabels}
+      />
+    </Wrapper>
+  );
+};
+
+// Data interface for categorical mode (24h x 7-day)
+interface ActivityData {
+  hour: number; // 0-23
+  day: number; // 0-6 (Mon-Sun)
+  value: number;
+}
+
+// Generate realistic 24h x 7-day activity data
+const generate24x7Data = (): ActivityData[] => {
+  const data: ActivityData[] = [];
+
+  for (let day = 0; day < 7; day++) {
+    for (let hour = 0; hour < 24; hour++) {
+      // Base activity level
+      let value = 5;
+
+      // Peak hours (lunch and evening)
+      if (hour >= 11 && hour <= 13) value = 40; // Lunch peak
+      if (hour >= 18 && hour <= 21) value = 60; // Evening peak
+
+      // Night hours (low activity)
+      if (hour >= 0 && hour <= 6) value = 2;
+
+      // Weekend boost
+      if (day === 5 || day === 6) value *= 1.5;
+
+      // Friday evening extra boost
+      if (day === 4 && hour >= 18) value *= 1.3;
+
+      // Add some randomness
+      value = Math.floor(value + Math.random() * 20 - 10);
+      value = Math.max(0, value); // Ensure non-negative
+
+      data.push({ hour, day, value });
+    }
+  }
+
+  return data;
+};
+
+export const WeeklyActivity: StoryFn<HeatmapProps<ActivityData>> = (args) => {
+  const data = React.useMemo(() => generate24x7Data(), []);
+
+  const hourLabels = Array.from({ length: 24 }, (_, i) =>
+    i === 0 ? '12am' : i < 12 ? `${i}am` : i === 12 ? '12pm' : `${i - 12}pm`,
+  );
+
+  const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  return (
+    <Wrapper style={{ height: '250px' }}>
+      <HeatMap<ActivityData>
+        name="weekly-activity"
         data={data}
-        xAccessor={xAccessor}
-        yAccessor={yAccessor}
-        zAccessor={zAccessor}
-        tooltipAccessor={tooltipAccessor}
-        variant="month"
-        name="online"
+        xAccessor={(d) => d.hour}
+        yAccessor={(d) => d.day}
+        valueAccessor={(d) => d.value}
+        xCategories={hourLabels}
+        yCategories={dayLabels}
+        showDayLabels={args.showDayLabels}
+        tooltip={{
+          accessor: (d) => {
+            const activityData = d as ActivityData;
+            return `${dayLabels[activityData.day]}, ${hourLabels[activityData.hour]}\n${activityData.value} activities`;
+          },
+        }}
       />
     </Wrapper>
   );