Charts overriding custom chart config with default config

.changeset/cool-eels-matter.md

@@ -0,0 +1,5 @@
+---
+'@propeldata/ui-kit': patch
+---
+
+[TimeSeries, Leaderboard, PieChart] Fix custom chart config logic

.changeset/soft-cameras-grin.md

@@ -2,4 +2,5 @@
 '@propeldata/ui-kit': patch
 ---
 
-Add fallbacks for Loading, Error, and Empty states
+Add `errorFallback` callback for Error state, `renderLoader` callback for Loading state, and `renderEmpty` callback for
+Empty state.

app/examples/react-16/README.md

@@ -1 +1,2 @@
-# react-16
+A CRA (Create React App) project utilizing the [Example Dashboard](../../../packages//examples/dashboard/) to operate
+within a React version 16 environment.

app/examples/react-16/package.json

@@ -7,13 +7,11 @@
   },
   "dependencies": {
     "@propeldata/ui-kit": "workspace:^",
+    "dashboard-example": "workspace:^",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-scripts": "^5.0.1"
   },
-  "devDependencies": {
-    "tailwindcss": "^3.3.1"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

app/examples/react-16/src/App.js

@@ -1,22 +1,5 @@
 import React from 'react'
-import {
-  AccessTokenProvider,
-  ThemeProvider,
-  useTheme,
-  FilterProvider,
-  SimpleFilter,
-  RelativeTimeRange
-} from '@propeldata/ui-kit'
-import {
-  TimeSeriesStaticTest,
-  TimeSeriesConnectedTest,
-  LeaderboardStaticTest,
-  LeaderboardConnectedTest,
-  CounterStaticTest,
-  CounterConnectedTest,
-  PieChartStaticTest,
-  PieChartConnectedTest
-} from 'components'
+import { Dashboard } from 'dashboard-example'
 
 const { REACT_APP_CLIENT_ID, REACT_APP_CLIENT_SECRET } = process.env
 
@@ -31,53 +14,6 @@ async function fetchToken() {
   return access_token
 }
 
-const GlobalStyles = () => {
-  const theme = useTheme()
-  if (document && theme) {
-    document.body.style.setProperty('--bg-color', theme.bgSecondary)
-  }
-  return null
-}
-
 export default function App() {
-  const [theme, setTheme] = React.useState('lightTheme')
-  return (
-    <AccessTokenProvider fetchToken={fetchToken}>
-      <FilterProvider>
-        <ThemeProvider baseTheme={theme}>
-          <GlobalStyles />
-          <main style={{ color: 'var(--propel-text-secondary)', backgroundColor: 'var(--propel-bg-secondary)' }}>
-            <h1 className="px-6 py-3 text-3xl">
-              React 16 Testing App
-              <button className="m-3" onClick={() => setTheme(theme === 'lightTheme' ? 'darkTheme' : 'lightTheme')}>
-                {theme === 'lightTheme' ? '🌚' : '🌞'}
-              </button>
-            </h1>
-            <hr />
-            <div className="px-6 py-3 w-full flex justify-end">
-              <SimpleFilter
-                query={{
-                  columnName: process.env.REACT_APP_DIMENSION_1,
-                  dataPool: { name: process.env.REACT_APP_DATA_POOL_UNIQUE_NAME_1 },
-                  maxValues: 1000,
-                  timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 }
-                }}
-                autocompleteProps={{ containerStyle: { width: '500px' }, placeholder: 'Filter by taco name' }}
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <TimeSeriesStaticTest />
-              <TimeSeriesConnectedTest />
-              <LeaderboardStaticTest />
-              <LeaderboardConnectedTest />
-              <CounterStaticTest />
-              <CounterConnectedTest />
-              <PieChartStaticTest />
-              <PieChartConnectedTest />
-            </div>
-          </main>
-        </ThemeProvider>
-      </FilterProvider>
-    </AccessTokenProvider>
-  )
+  return <Dashboard fetchToken={fetchToken} reactVersion="16" envs={process.env} />
 }