feat: Automatic scaleTypes, elementTypes and stacking

Author: tannerlinsley

docs/src/pages/docs/api.md

@@ -63,9 +63,9 @@ The individual datums in a series' `data` array can be anything you want! Just r
 React Charts uses axes to configure a fair amount of the chart. Axes handle many things like:
 
 - Accessing chart values from your series' `Datum`s
-- Positioning your axis on the grid
-- Configuring the scale type for your axis
-- Configuring the element type for series that are tied to your axis
+- Optionally positioning your axis on the grid
+- Optionsally configuring the scale type for your axis
+- Optionsally configuring the element type for series that are tied to your axis
 
 To date, we have the following scale types available:
 
@@ -97,9 +97,6 @@ function MyChart() {
 
   const primaryAxis = React.useMemo(
     (): AxisOptions<MyDatum> => ({
-      isPrimary: true,
-      scaleType: 'time',
-      position: 'bottom',
       getValue: datum => datum.date,
     }),
     []
@@ -108,8 +105,6 @@ function MyChart() {
   const secondaryAxes = React.useMemo(
     (): AxisOptions<MyDatum>[] => [
       {
-        scaleType: 'linear',
-        position: 'left',
         getValue: datum => datum.stars,
       },
     ],
@@ -130,7 +125,7 @@ function MyChart() {
 
 ## Secondary Axis Element Types
 
-Secondary axes can be configured to render their respective series using 3 different element types using the `AxisOptions<TDatum>['scaleType']` property:
+Secondary axes for the most part are automatic, but can be optionally configured to render their respective series using 3 different element types using the `AxisOptions<TDatum>['scaleType']` property:
 
 - `line`
   - 1 Line per series (optional, eg. for Bubble/Scatter charts)
@@ -148,9 +143,7 @@ Example
 const secondaryAxes = React.useMemo(
   (): AxisOptions<MyDatum>[] => [
     {
-      // scaleType: 'linear',
-      // position: 'left',
-      // getValue: datum => datum.stars,
+      getValue: datum => datum.stars,
       elementType: 'bar',
     },
   ],

docs/src/pages/docs/getting-started.md

@@ -43,23 +43,14 @@ const data: Series[] = [
 ```
 
 - `primaryAxis: AxisOptions<TDatum>`
-  - `isPrimary: true`
-  - Scale Type
-  - Position
   - Primary Value Accessor
 - `secondaryAxes: AxisOptions<TDatum>[]`
-  - `isPrimary: boolean`
-  - Scale Type
-  - Position
   - Primary Value Accessor
 
 ```tsx
 function App() {
   const primaryAxis = React.useMemo(
     (): AxisOptions<DailyStars> => ({
-      isPrimary: true,
-      scaleType: 'time',
-      position: 'bottom',
       getValue: datum => datum.date,
     }),
     []
@@ -68,8 +59,6 @@ function App() {
   const secondaryAxes = React.useMemo(
     (): AxisOptions<DailyStars>[] => [
       {
-        scaleType: 'linear',
-        position: 'left',
         getValue: datum => datum.stars,
       },
     ],

docs/src/pages/docs/overview.md

@@ -10,6 +10,9 @@ Outside of providing custom styling and interfacing with some D3-supported optio
 You will, however, need general knowledge of:
 
 - Your data. If you don't know the data you want to visualize, you're not going to get far at all!
+
+It's optional for basic charting, but if you really want to be productive, you'll want understand:
+
 - High-level Scale Architypes, the differences in what they do, and why you would use one over the other. Again, you do not need to know how to build your own scales or use `d3-scale`, but knowing the concepts and ideas behind scale types like `time`, `linear/continuous`, and `ordinal/band` will go a long way. [Learn more at Observerble](https://observablehq.com/@d3/learn-d3-scales).
 
 I think that's it TBH! But this list might grow/shrink in the future. If you think something should be added to this list or changed in anyway, hit the **Edit this page on Github** link at the bottom!

examples/simple/src/components/Area.tsx

@@ -13,9 +13,6 @@ export default function Bar() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "time",
-      position: "bottom",
       getValue: (datum) => datum.primary as Date,
     }),
     []
@@ -26,11 +23,10 @@ export default function Bar() {
   >(
     () => [
       {
-        scaleType: "linear",
-        position: "left",
         getValue: (datum) => datum.secondary,
-        elementType: "area",
         stacked: true,
+        // OR
+        // elementType: "area",
       },
     ],
     []

examples/simple/src/components/Band.tsx

@@ -14,8 +14,6 @@ export default function Band() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "band",
       position: "left",
       getValue: (datum) => datum.primary,
     }),
@@ -27,12 +25,9 @@ export default function Band() {
   >(
     () => [
       {
-        scaleType: "linear",
         position: "top",
         show: false,
         getValue: (datum) => datum.secondary,
-        elementType: "bar",
-        stacked: true,
         stackOffset: stackOffsetWiggle,
       },
     ],

examples/simple/src/components/Bar.tsx

@@ -13,9 +13,6 @@ export default function Bar() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "band",
-      position: "bottom",
       getValue: (datum) => datum.primary,
     }),
     []
@@ -26,11 +23,7 @@ export default function Bar() {
   >(
     () => [
       {
-        scaleType: "linear",
-        position: "left",
         getValue: (datum) => datum.secondary,
-        elementType: "bar",
-        stacked: true,
       },
     ],
     []

examples/simple/src/components/BarHorizontal.tsx

@@ -13,8 +13,6 @@ export default function Bar() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "band",
       position: "left",
       getValue: (datum) => datum.primary,
     }),
@@ -26,11 +24,8 @@ export default function Bar() {
   >(
     () => [
       {
-        scaleType: "linear",
         position: "bottom",
         getValue: (datum) => datum.secondary,
-        elementType: "bar",
-        stacked: true,
       },
     ],
     []

examples/simple/src/components/Bubble.tsx

@@ -14,9 +14,6 @@ export default function Bubble() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "time",
-      position: "bottom",
       getValue: (datum) => datum.primary as unknown as Date,
     }),
     []
@@ -27,10 +24,7 @@ export default function Bubble() {
   >(
     () => [
       {
-        scaleType: "linear",
-        position: "left",
         getValue: (datum) => datum.secondary,
-        elementType: "line",
       },
     ],
     []

examples/simple/src/components/CustomStyles.tsx

@@ -51,9 +51,6 @@ function MyChart({
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "band",
-      position: "bottom",
       getValue: (datum) => datum.primary,
     }),
     []
@@ -64,11 +61,8 @@ function MyChart({
   >(
     () => [
       {
-        scaleType: "linear",
-        position: "left",
         getValue: (datum) => datum.secondary,
         elementType,
-        stacked: true,
       },
     ],
     [elementType]

examples/simple/src/components/DarkMode.tsx

@@ -13,9 +13,6 @@ export default function DarkMode() {
     AxisOptions<typeof data[number]["data"][number]>
   >(
     () => ({
-      isPrimary: true,
-      scaleType: "time",
-      position: "bottom",
       getValue: (datum) => datum.primary as unknown as Date,
     }),
     []
@@ -26,10 +23,7 @@ export default function DarkMode() {
   >(
     () => [
       {
-        scaleType: "linear",
-        position: "left",
         getValue: (datum) => datum.secondary,
-        elementType: "line",
       },
     ],
     []