4

I am using the React (recharts) integration of cube and was wondering how to format dates or "weeks" instead of having the full ISOdate.

For example Week 39 instead of 2021-09-27T00:00:00.000 on the charts and views.

I tried looking at the docs but can't find it. Thanks!

bwarff
  • 365
  • 3
  • 16
programmer.john.may
  • 71
  • 4
  • 1
    Welcome to the community @John.may! Are you using any localization library like moment.js, Luxon ? You can use them to transform the DateTime to week number and pass it to the charting library. – the_spectator Sep 20 '21 at 11:27

2 Answers2

3

You can reformat your date data before passing it to the chart, use moment.js to get the week number Documentation

moment(date).week();

make sure to set the locale region because the week starts on Monday or Sunday depends on the region:

//this is for France
import 'moment/locale/fr'
moment.locale('fr')

(EDIT) : You can use other libraries for this purpose such as Day.js or date-fns.

Kaizendae
  • 853
  • 11
  • 24
  • 1
    Very minor nitpick, but I would actually recommend [dayjs](https://github.com/iamkun/dayjs), the successor to moments, as the latter is deprecated (although still safe to use) – Moistbobo Sep 20 '21 at 12:43
  • @Heidiki, thank you very much. I am using the antd based recharts that comes with cubejs (one of the dashboard options) and I can't find where I could use this with Cube. It seems it uses an object that cubes "useCubeQuery" returns called "ResultSet", which for a table has the "tableColumns" and "tablePivot" functions for example. This makes me think there must be a way to do this from the Cube config, is this something you might have an idea what to do with? Thanks! – programmer.john.may Sep 28 '21 at 15:56
  • 2
    @programmer.john.may have you tried using ResultSet.chartPivot( )? what I always do if am getting the data for a chart is use ResultSet.chartPivot( ) and map the results to a structure that will work with the chart. – Kaizendae Sep 28 '21 at 16:35
1

I wouldn't recommend using moment.js since it has been deprecated try using date-fns ,it offers more customization Here is the snippet of using date-fns.

    import { format } from "date-fns";
    
    const getWeek = new Date('2021-09-27T00:00:00.000')
    const result = format(getWeek,"Io")) //here "Io" stands for ISO week of year,
   //result -> 39th

In fact you can modify as per your conveniant, how to display the week here is the document of that date-fns format
just in case you want the visual I have added a codesandbox week format using date-fns

Anil Loutombam
  • 355
  • 6
  • 19