Make the Cloud Usage -tooltip easier to read

[mikkelsonnenschein]

Feature Suggestion

Is your feature request related to a problem? Please describe.
I find it hard to quickly skim the values of the custom tool tip on the cloud usage card.

Describe the solution you'd like
Add some styling to the tooltip to make it easier to see read the values of the data point

Additional context
Current design

Possible Implementation

I would suggest breaking the tooltip into a small table format, and add the colors of the corresponding graph.

If you think it is relevant, I would like to help out with the implementation of this.

[camcash17]

Hi @mikkelsonnenschein, this looks like a great update! I just added this issue to our project board. Please feel free to submit a PR and reach out for any additional support.

[mikkelsonnenschein]

Hi @camcash17,

I am working on a file called customToolTipStyles.ts to add styles to the CustomTooltip.tsx

I want to apply the chart colors from the palette, however i am stuck trying to access them... here's the code:

import { makeStyles } from '@material-ui/core/styles'
import { CCFTheme } from '../../../../utils/themes/'

const useStyles = makeStyles<CCFTheme>(({ palette, spacing }) => {
  const dataRowStyles = {
    display: 'flex',
    justifyContent: 'space-between',
    padding: spacing(0.5),
    borderBottom: '1px solid #00000020',
  }

  return {
    tooltipContainer: {
      width: '200px',
    },
    dateRow: {
      padding: spacing(0.5, 1),
      borderBottom: '1px solid #00000020',
    },
    emissionsRow: {
      ...dataRowStyles,
      borderLeft: '4px solid ' + palette.chart[0].main, // 👈 I can't seem to access this
    },
   ...
  }
})

export default useStyles

Do you have a suggestion for how to go about applying this color? 😅

[4upz]

Hi @mikkelsonnenschein sorry for the late reply, and thanks for being willing to work on this! It seems like you're accessing the palette colors in the correct way, which is the same way we do to access the base colors in other parts of the code.

Maybe it's worth trying the getChartColors function located in packages/client/src/utils/themes/index.ts. It should return the chart hex codes as an array. We use this same function to assign the colors to the Line Chart on line 26 of the ApexLineChart.tsx file.

Let me know if that helps!

[mikkelsonnenschein]

Hi @4upz. Thanks for the response! It seems like I get 2 different theme objects when in customToolTipStyles.ts and in ApexLineChart.tsx which is why I can not access the chart colors with 'getChartColors'.

customToolTipStyles.ts

import { makeStyles, useTheme } from '@material-ui/core/styles'
import { getChartColors, CCFTheme } from '../../../../utils/themes'

const useStyles = makeStyles<CCFTheme>(({ spacing }) => {
  const theme = useTheme() as CCFTheme
  console.log(theme)
...

Outputs:

While ApexLineChart.tsx

const ApexLineChart: FunctionComponent<ApexChartProps> = ({ data }) => {
  const theme = useTheme() as CCFTheme
  const colors = getChartColors(theme)
  console.log(theme)
...

Outputs:

Do you have an input on how i can get full theme object incl. chart colors in customToolTipStyles, is there a configuration somewhere that I need to adjust?

[4upz]

@mikkelsonnenschein Sorry, took a minute to get to the root of this. The good news is that it is not on your end! The culprit seems to be that the CustomToolTip is rendered as static markup as shown in ApexLineCharts.ts#L210

I believe this is causing the component to not receive the ThemeProvider context that allows the useStyles function to recognize the custom theme that includes the palette.

I'd recommend passing the theme object used by ApexLineCharts as a prop to CustomToolTipStyles then have the component pass it as a parameter to be used by the useStyles function in your customTooltipStyles class. Alternatively, if you only need the chart colors, you can pass them down as a prop the same way.

Let me know if that helps or if that makes sense! Happy to suggest other solutions if you have additional trouble.