8000 [WIP] NEW API by SerhiiTsybulskyi · Pull Request #281 · reaviz/reaviz · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[WIP] NEW API #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
Draft

[WIP] NEW API #281

wants to merge 12 commits into from
+2,976 −1,028

Conversation

SerhiiTsybulskyi
Copy link
Contributor

PR Checklist

What is the current behavior?

Current API looks like

  <BarChart
    width={350}
    height={250}
    data={categoryData}
    gridlines={<GridlineSeries line={<Gridline strokeColor="purple" />} />}
    series={<BarSeries bar={<Bar label={<BarLabel position="top" />} />} />}
    xAxis={
      <LinearXAxis
        type="category"
        position="end"
        tickSeries={
          <LinearXAxisTickSeries
            tickSize={40}
            line={<LinearXAxisTickLine strokeColor="green" strokeWidth={4} />}
            label={<LinearXAxisTickLabel />}
          />
        }
      />
    }
    yAxis={
      <LinearYAxis
        type="value"
        position="start"
        tickSeries={
          <LinearYAxisTickSeries
            tickSize={40}
            line={<LinearYAxisTickLine strokeColor="green" strokeWidth={4} />}
            label={<LinearYAxisTickLabel />}
          />
        }
      />
    }
    secondaryAxis={[
      <LinearXAxis
        type="category"
        orientation="horizontal"
        position="start"
        scale={scale}
        axisLine={null}
        tickSeries={
          <LinearXAxisTickSeries
            line={null}
            label={<LinearXAxisTickLabel padding={20} position="start" />}
          />
        }
      />
    ]}
  />

What is the new behavior?

New API should look like that, which give for us more flexible behavior

  <BarChart width={350} height={250} data={categoryData}>
    <GridlineSeries>
      <Gridline strokeColor="purple" />
    </GridlineSeries>
    <LinearYAxis type="value" position="start">
      <LinearYAxisTickSeries tickSize={40}>
        <LinearYAxisTickLine strokeColor="green" strokeWidth={4} />
        <LinearYAxisTickLabel />
      </LinearYAxisTickSeries>
    </LinearYAxis>
    <LinearXAxis type="category" position="end">
      <LinearXAxisTickSeries tickSize={40}>
        <LinearXAxisTickLine strokeColor="green" strokeWidth={4} />
        <LinearXAxisTickLabel />
      </LinearXAxisTickSeries>
    </LinearXAxis>
    <SecondaryAxis>
      <LinearXAxis
        orientation="horizontal"
        type="category"
        scale={scale}
        position="start"
      >
        <LinearXAxisTickSeries>
          <LinearXAxisTickLabel padding={20} position="start" />
          <LinearXAxisTickLine
            strokeColor="red"
            strokeWidth={4}
            size={8}
            position="start"
          />
        </LinearXAxisTickSeries>
      </LinearXAxis>
    </SecondaryAxis>
    <BarSeries>
      <Bar>
        <BarLabel position="top" fill="green" />
      </Bar>
    </BarSeries>
  </BarChart>

Does this PR introduce a breaking change?

[x] Yes
[ ] No

What need to do

  • Update Linear X/Y Axis to use new structure
  • Update Radial Axis to use new structure
  • Update GridLines to use new structure
  • Update Bar to use new structure
  • Update Gradient to use new structure
  • Update Legends to use new structure
  • Update Tooltip to use new structure
  • Update AreaChart to use new structure
  • Update BarChart to use new structure
  • Update Count to use new structure
  • Update BarList to use new structure
  • Update BubbleChart to use new structure
  • Update FunnelChart to use new structure
  • Update Heatmap to use new structure
  • Update LineChart to use new structure
  • Update Map to use new structure
  • Update Meter to use new structure
  • Update PieChart to use new structure
  • Update RadarChart to use new structure
  • Update RadialAreaChart to use new structure
  • Update RadialBarChart to use new structure
  • Update RadialGauge to use new structure
  • Update RadialScatterPlot to use new structure
  • Update Sankey to use new structure
  • Update ScatterPlot to use new structure
  • Update Sparkline to use new structure
  • Update SunburstChart to use new structure
  • Update TreeMap to use new structure
  • Update VennDiagram to use new structure
  • Add utility components to making common chart without defining full tree of components based on that discussion
  • Update blocks to use new structure after component updates

@SerhiiTsybulskyi SerhiiTsybulskyi self-assigned this Jan 14, 2025
@netlify Netlify
Copy link
netlify bot commented Jan 14, 2025 •
edited
Loading

❌ Deploy Preview for reaviz-storybook failed. Why did it fail? →

Name Link
🔨 Latest commit 4565702
🔍 Latest deploy log https://app.netlify.com/sites/reaviz-storybook/deploys/6786760954616000080a80d9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@SerhiiTsybulskyi SerhiiTsybulskyi

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@SerhiiTsybulskyi
0