Outage Example change english language

[alexandresebrao]

❔Question

I'm trying to use this library, with pond, but my application is not in english, so I want to switch the EventChart legend like the outage example you provide to portuguese. PS: The graph worked as I wanted, but I really need to be in other language.

Your Environment

Software	Name/Version
react-timeseries-charts	0.16.1
Browser	Chrome
Operating System	Windows 10

[molzahn-sio]

As far as I understand it you should be able to do the following:

The label prop accepts a function which will receive the currently hovered TimeRangeEvent and needs to return a string. You should be able to return anything you like if you initialized the event with appropriate data before.

For example if you're using react-intl you could do something like (untested code!):

//...
    const outageEvents = this.props.outages
      .map(({ startTime, endTime, ...data }) => {
        const rangeEvent = new TimeRange(new Date(startTime), new Date(endTime));
        return new TimeRangeEvent(rangeEvent, { data });
      });
    const outageSeries = new TimeSeries({ name: "outages", events: outageEvents });

//...
<EventChart series={series} size={45} style={styleFunc} 
   label={e => this.props.intl.formatMessage({ id: e.get("myData").myLabel })} />

//...

[alexandresebrao]

Hi Ralmo, I mean this area of the graph the XAxis legend. I fixed by forking and modifying the d3-time-format to compile to my language. So I succeed on what I need, but now I will have to keep updating whenever a new release is out.

[molzahn-sio]

@alexandresebrao try to use the format prop of the ChartContainer component using a function like this:

<ChartContainer
              format={(e: Date) =>
                this.props.intl.formatDate(e, {
                  weekday: "short",
                  hour: "numeric",
                  minute: "numeric",
                  second: "numeric"
                })
              }
// ...

This seems to change the time axis values of the whole chart.

[pjm17971]

@alexandresebrao does this last comment address your needs? If so can we close this?

[alexandresebrao]

Sorry for taking so long ! Yes you can close.