fix: line-column-chart centred points (vue)

[yassinedorbozgithub]

Motivation

This PR fixes the LineColumnChart to have centred points (Vue).

Fixes #43

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [ ] I have done the work for both react and vue
• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation (Storybook)
• [ ] I have added unit tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes

[marrouchi]

@yassinedorbozgithub There's a simpler solution for this after the refactoring i've made. You could alter the x coordinate in shapeDatum, in LineColumnChart recipe you do the following :

    <Points
          xDomainKey={xAxis.domainKey}
          yDomainKey={yLineAxis.domainKey}
          scopedSlots={{
            default: ({ shapeData, scales: { xScale } }) => {
              const bandwidth = xScale.scale.bandwith();
              const centeredShapeData = shapeData.map((shapeDatum) => ({ ...shapeDatum, x: shapeDatum.x + bandwidth / 2 }))
              return (
                <g className="ez-line">
                  <LinePath
                    shapeData={centeredShapeData}
                    curve={line.curve}
                    beta={line.beta}
                    stroke={line.stroke}
                    strokeWidth={line.strokeWidth}
                  />
                  {!marker.hidden &&
                    centeredShapeData.map((pointDatum) => {
                      return (
                        <Point
                          key={pointDatum.id}
                          shapeDatum={pointDatum}
                          r={marker.radius}
                          stroke={marker.color}
                          fill={marker.color}
                          strokeWidth={line.strokeWidth}
                        />
                      );
                    })}
                </g>
              );
            },
          }}
        />

[marrouchi]

I suggest we close this PR since there's a lot of conflicts due to the changes I've made. (sorry)

So let's open a new one :)