@material-ui/core#emphasize TypeScript Examples

useTooltipStyles = makeStyles<CostInsightsTheme>(
  (theme: CostInsightsTheme) =>
    createStyles({
      tooltip: {
        backgroundColor: theme.palette.tooltip.background,
        borderRadius: theme.shape.borderRadius,
        boxShadow: theme.shadows[1],
        color: theme.palette.tooltip.color,
        fontSize: theme.typography.fontSize,
        minWidth: 300,
      },
      maxWidth: {
        maxWidth: 300,
      },
      actions: {
        padding: theme.spacing(2),
      },
      header: {
        padding: theme.spacing(2),
      },
      content: {
        padding: theme.spacing(2),
      },
      lensIcon: {
        fontSize: `.75rem`,
      },
      divider: {
        backgroundColor: emphasize(theme.palette.divider, 1),
      },
      truncate: {
        maxWidth: 200,
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      },
      subtitle: {
        fontStyle: 'italic',
      },
    }),
)

useStyles = makeStyles((theme) =>
  createStyles({
    tableWrapper: {
      display: "flex",
      flexDirection: "column",
      width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,
      height: `calc(100vh - ${APP_BAR_HEIGHT}px)`,

      "& > .rdg": { flex: 1 },

      [theme.breakpoints.down("sm")]: { width: "100%" },
    },

    loadingContainer: {
      position: "sticky",
      left: 0,
      height: 100,
    },

    "@global": {
      ".rdg.rdg": {
        "--color": theme.palette.text.secondary,
        "--border-color": theme.palette.divider,
        // "--summary-border-color": "#aaa",
        "--background-color": theme.palette.background.paper,
        "--header-background-color": theme.palette.background.default,
        "--row-hover-background-color": emphasize(
          theme.palette.background.paper,
          0.04
        ),
        "--row-selected-background-color":
          theme.palette.type === "light"
            ? lighten(theme.palette.primary.main, 0.9)
            : darken(theme.palette.primary.main, 0.8),
        "--row-selected-hover-background-color":
          theme.palette.type === "light"
            ? lighten(theme.palette.primary.main, 0.8)
            : darken(theme.palette.primary.main, 0.7),
        "--checkbox-color": theme.palette.primary.main,
        "--checkbox-focus-color": theme.palette.primary.main,
        "--checkbox-disabled-border-color": "#ccc",
        "--checkbox-disabled-background-color": "#ddd",
        "--selection-color": theme.palette.primary.main,
        "--font-size": "0.75rem",
        "--cell-padding": theme.spacing(0, 1.5),

        border: "none",
        backgroundColor: "transparent",

        ...theme.typography.body2,
        fontSize: "0.75rem",
        lineHeight: "inherit !important",

        "& .rdg-cell": {
          display: "flex",
          alignItems: "center",
          padding: "var(--cell-padding)",

          overflow: "visible",
          contain: "none",
        },

        "& .rdg-cell-frozen-last": {
          boxShadow:
            theme.palette.type === "light"
              ? "2px 0 4px 0px rgba(0, 0, 0, .08)"
              : "2px 0 4px 0px rgba(0, 0, 0, .67)",
        },

        "& .rdg-cell-copied": {
          backgroundColor:
            theme.palette.type === "light"
              ? lighten(theme.palette.primary.main, 0.7)
              : darken(theme.palette.primary.main, 0.6),
        },
      },

      ".rdg-header-row .rdg-cell": {
        borderTop: "1px solid var(--border-color)",
      },

      ".rdg-row:hover": { color: theme.palette.text.primary },

      ".row-hover-iconButton": {
        color: theme.palette.text.disabled,
        transitionDuration: "0s",

        ".rdg-row:hover &": {
          color: theme.palette.text.primary,
          backgroundColor: fade(
            theme.palette.text.primary,
            theme.palette.action.hoverOpacity * 2
          ),
        },
      },

      ".cell-collapse-padding": {
        margin: theme.spacing(0, -1.5),
        width: `calc(100% + ${theme.spacing(3)}px)`,
      },
    },
  })
)

CostOverviewBreakdownChart = ({
  costBreakdown,
}: CostOverviewBreakdownChartProps) => {
  const theme = useTheme<CostInsightsTheme>();
  const classes = useStyles(theme);
  const lastCompleteBillingDate = useLastCompleteBillingDate();
  const { duration } = useFilters(mapFiltersToProps);
  const [isExpanded, setExpanded] = useState(false);

  if (!costBreakdown) {
    return null;
  }

  const flattenedAggregation = costBreakdown
    .map(cost => cost.aggregation)
    .flat();

  const totalCost = aggregationSum(flattenedAggregation);

  const previousPeriodTotal = getPreviousPeriodTotalCost(
    flattenedAggregation,
    duration,
    lastCompleteBillingDate,
  );
  const currentPeriodTotal = totalCost - previousPeriodTotal;
  const canExpand = costBreakdown.length >= 8;
  const otherCategoryIds: string[] = [];

  const breakdownsByDate = costBreakdown.reduce(
    (breakdownByDate, breakdown) => {
      const breakdownTotal = aggregationSum(breakdown.aggregation);
      // Group breakdown items with less than 10% of the total cost into "Other" category if needed
      const isOtherCategory =
        canExpand && breakdownTotal < totalCost * LOW_COST_THRESHOLD;

      const updatedBreakdownByDate = { ...breakdownByDate };
      if (isOtherCategory) {
        otherCategoryIds.push(breakdown.id);
      }
      breakdown.aggregation.forEach(curAggregation => {
        const costsForDate = updatedBreakdownByDate[curAggregation.date] || {};

        updatedBreakdownByDate[curAggregation.date] = {
          ...costsForDate,
          [breakdown.id]:
            (costsForDate[breakdown.id] || 0) + curAggregation.amount,
        };
      });

      return updatedBreakdownByDate;
    },
    {} as Record<string, Record<string, number>>,
  );

  const chartData: Record<string, number>[] = Object.keys(breakdownsByDate).map(
    date => {
      const costsForDate = Object.keys(breakdownsByDate[date]).reduce(
        (dateCosts, breakdown) => {
          // Group costs for items that belong to 'Other' in the chart.
          const cost = breakdownsByDate[date][breakdown];
          const breakdownCost =
            !isExpanded && otherCategoryIds.includes(breakdown)
              ? { Other: (dateCosts.Other || 0) + cost }
              : { [breakdown]: cost };
          return { ...dateCosts, ...breakdownCost };
        },
        {} as Record<string, number>,
      );
      return {
        ...costsForDate,
        date: Date.parse(date),
      };
    },
  );

  const sortedBreakdowns = costBreakdown.sort(
    (a, b) => aggregationSum(a.aggregation) - aggregationSum(b.aggregation),
  );

  const renderAreas = () => {
    const separatedBreakdowns = sortedBreakdowns
      // Check that the breakdown is a separate group and hasn't been added to 'Other'
      .filter(
        breakdown =>
          breakdown.id !== 'Other' && !otherCategoryIds.includes(breakdown.id),
      )
      .map(breakdown => breakdown.id);
    // Keep 'Other' category at the bottom of the stack
    const breakdownsToDisplay = isExpanded
      ? sortedBreakdowns.map(breakdown => breakdown.id)
      : ['Other', ...separatedBreakdowns];

    return breakdownsToDisplay.map((breakdown, i) => {
      // Logic to handle case where there are more items than data viz colors.
      const color =
        theme.palette.dataViz[
          (breakdownsToDisplay.length - 1 - i) %
            (theme.palette.dataViz.length - 1)
        ];
      return (
        <Area
          key={breakdown}
          dataKey={breakdown}
          isAnimationActive={false}
          stackId="1"
          stroke={color}
          fill={color}
          onClick={() => setExpanded(true)}
          style={{
            cursor: breakdown === 'Other' && !isExpanded ? 'pointer' : null,
          }}
        />
      );
    });
  };

  const tooltipRenderer: ContentRenderer<TooltipProps> = ({
    label,
    payload = [],
  }) => {
    if (isInvalid({ label, payload })) return null;

    const date =
      typeof label === 'number'
        ? DateTime.fromMillis(label)
        : DateTime.fromISO(label!);
    const dateTitle = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);
    const items = payload.map(p => ({
      label: p.dataKey as string,
      value: formatGraphValue(p.value as number),
      fill: p.fill!,
    }));
    const expandText = (
      <Box>
        <Divider
          style={{
            backgroundColor: emphasize(theme.palette.divider, 1),
            margin: '10px 0',
          }}
        />
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <FullScreenIcon />
          <Typography>Click to expand</Typography>
        </Box>
      </Box>
    );
    return (
      <Tooltip title={dateTitle}>
        {items.reverse().map((item, index) => (
          <TooltipItem key={`${item.label}-${index}`} item={item} />
        ))}
        {canExpand && !isExpanded ? expandText : null}
      </Tooltip>
    );
  };

  const options: Partial<BarChartLegendOptions> = {
    previousName: formatPeriod(duration, lastCompleteBillingDate, false),
    currentName: formatPeriod(duration, lastCompleteBillingDate, true),
    hideMarker: true,
  };

  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex" flexDirection="row">
        <BarChartLegend
          costStart={previousPeriodTotal}
          costEnd={currentPeriodTotal}
          options={options}
        />
      </Box>
      <ResponsiveContainer
        width={classes.container.width}
        height={classes.container.height}
      >
        <AreaChart
          data={chartData}
          margin={{
            top: 16,
            right: 30,
            bottom: 40,
          }}
        >
          <CartesianGrid stroke={classes.cartesianGrid.stroke} />
          <XAxis
            dataKey="date"
            domain={['dataMin', 'dataMax']}
            tickFormatter={overviewGraphTickFormatter}
            tickCount={6}
            type="number"
            stroke={classes.axis.fill}
          />
          <YAxis
            domain={[() => 0, 'dataMax']}
            tick={{ fill: classes.axis.fill }}
            tickFormatter={formatGraphValue}
            width={classes.yAxis.width}
          />
          {renderAreas()}
          <RechartsTooltip content={tooltipRenderer} animationDuration={100} />
        </AreaChart>
      </ResponsiveContainer>
    </Box>
  );
}