Sorting not working chrome

[robksawyer]

Thanks for the great library. Just wanted to mention that sorting seems to be working great in Safari, but not in Chrome. Any ideas?

[rachidelaid]

it's not working in chrome for me too.
or do I have to change something first?
but it is working in Firefox out of the box.

[bchao1]

Hey guys, thanks for the feedback. As I am currently a little busy, I'll get back to this issue ASAP. Thanks again!

[SunLeL]

I'm sorry for my stupied. I still don't know how to run it. I try to run it with command "node demo.js", but it shows "SyntaxError:Unexpected token '<'", and "SyntaxError: Cannot use import statement outside a module". Besides, where should the code of "import BarChart from 'chart-race-react'; " and "<div style={{width: "500px"}}>" be written in? How should I start?

[robksawyer]

@Mckinsey666 it would be cool if you added a demo project to show how to launch it. In the meantime, I've created one over at https://github.com/robksawyer/chart-race-react-demo. @SunLeL maybe that'll help you get started.

[robksawyer]

After some more poking around, I figured out what the issue was inside of sortAxis. See the updated sort method below with the fix. For more info see, https://v8.dev/blog/array-sort

I added a few new features to it.

/**
 * sortAxis
 * Handles sorting the results
 * @param {*} i is the item to start sorting from
 * @param {number} maxItems is the maximum number of items to allow in the list
 * @param {*} descending is the direction to sort
 */
  const sortAxis = (i, maxItems, descending) => {
    if(descending === undefined) descending = true;
    // Build a new array to sort e.x. { name: 'some name', val: 1 }
    let toSort = Object.keys(data).map(name => {
      return {
        name,
        val: data[name][i]
      };
    });
    // Handle the sorting based on the values
    toSort.sort((left, right) => left.val - right.val)
    if (descending) {
      toSort.reverse()
    }
    // Slice based on the maximum items allowed
    const fItems = Object.keys(data).length
    if (maxItems && maxItems <= fItems) {
      toSort = toSort.slice(0, maxItems)
    }
    const maxVal = Math.max.apply(Math, toSort.map(item => item.val))
    const minVal = Math.min.apply(Math, toSort.map(item => item.val))
    // Sorted list of results based on the axis
    return [toSort.reduce((ret, item, idx) => ({
      ...ret, ...{ [item.name]: idx }
    }), {}), minVal, maxVal]
  }