Update Dashboard UI #1002

ctyrrellnrel · 2023-07-12T00:40:22Z

Very basic, just replaced normal details view of 'My distance' with chart,
next steps
- switch 'details' view to a react component
- create button to switch between chart and details view in 'my distance' card
- Figure out why all data is showing up unlabled
- Allow the axis to switch easily
  - right now, setting isHorizontal doesn't completely switch data, only thedirection of the bars
  - would be nice to flip data axis and bar axis simultaneously

- replaced normal details view of 'My distance' with chart - next steps - create button to switch between chart and details view in 'my distance' card - Figure out why all data is showing up unlabled - Allow the axis to switch easily - right now, setting isHorizontal doesn't completely switch data, only thedirection of the bars - would be nice to flip data axis and bar axis simultaneously

ctyrrellnrel · 2023-07-12T00:46:40Z

I will be adding images when I get farther in creating the component.

- one (MetricDetails) is going to be a copy of the original metric details view - the next (MetricsCard) is going to be a container to have both the BarChart component, and the MetricDetails component - Will be a react component, rather than function, and will hold onto the state of whether or not the barchart or metricdetails will be showing - next steps - add a button to switch between the two views

- allows the card to keep track of whether or not it has a BarChart or MetricDetails child component - next step - Add button

- next step - format and style button

- button allows switching between the BarChart and the MetricDetails card - button icon switches depending on the card represented

ctyrrellnrel · 2023-07-12T10:45:53Z

Current State of PR

currently working to create react components for all of the cards, that include the new dashboard designs, to see if those work well.

Currently added (bottom dashboard)
- Graph view
- button that switches between graph view and 'details' view
To do
- Add Better styling to card
- Add the details view
- Add bleeding edge / arrows to switch between cards
- work on the graph view

Images

This shows the ability to switch between views using the right button in the 'my distance' card

the styling is a bit funky right now, but will be solved later on

JGreenlee · 2023-07-12T15:19:01Z

Good progress! I'll review the code later

JGreenlee · 2023-07-12T17:52:14Z

www/js/components/BarChart.tsx

  const { colors } = useTheme();
  const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1);

  const barChartRef = useRef<Chart>(null);

-  const defaultPalette = [
+  const defaultPalette = [ 


Try to avoid committing needless changes like this, where you add a space or adjust indentation

I know this was probably on accident - just make sure you check over the diff of what you're committing before you do so

JGreenlee · 2023-07-12T17:55:00Z

www/js/components/MetricsCard.tsx

+    '#80afad', // teal oklch(72% 0.05 192) 
+  ]
+  return (
+    <Card children={{}} style={{width:"90%", alignSelf:"center", height:"280px" }}>


You don't have to include children as a prop. I know VSCode probably yelled at you about it being missing.

As long as there are components nested inside you can ignore that warning. It's some issue with VSCode, Typescript, and React.

JGreenlee · 2023-07-12T17:57:01Z

www/js/components/MetricDetails.tsx

+  const { colors } = useTheme();
+  const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1);
+
+  const defaultPalette = [


I'm guessing this was copied over from BarChart. It doesn't need to be here though

If you want to copy the contents of a file as a starting point for a new file, that's ok -- just make sure you remove the bits that aren't relevant.
we don't want unused code lying around

ctyrrellnrel · 2023-07-13T10:46:39Z

we don't want unused code lying around

Alright, yeah I was planning on taking it out later, but I guess it's best to simply take it out immediately.

You don't have to include children as a prop. I know VSCode probably yelled at you about it being missing.

Also I saw that, good to know that it is not required, it seemed like a weird requirement to have.

- removed children property from card - removed leftover code from copying from BarChart.tsx to MetricsCard and MetricDetails - Removed unecessary import statements

JGreenlee · 2023-07-14T03:19:05Z

@ctyrrellnrel Some tips while you are working on these TODO items:

Add Better styling to card

If the current styling bugs you, go ahead; else I wouldn't stress too much about matching the existing style. Polishing aesthetics can be a later step; right now we just want to see more progress on the rewrite

Add the details view

At its core, this view is just going to be rows and columns. To achieve this, you can nest <View> components: define some row Views and put column Views inside the rows. Give each row flex: 1 if you want them equally spaced.

Add bleeding edge / arrows to switch between cards

Reminder that you can reference this example I made: https://snack.expo.dev/@jgreenlee/carousel-scrollview-with-bleeding-edges,
And if there's some problem with that approach, the arrows can be Plan B.

work on the graph view

The graph view looks pretty ok as-is, but how about adding a button to toggle between "Individual" and "Population" stats? I think we still want this functionality.

-- also switched main-metrics html so that only the MetricsCard element is held in the ion-slide element, without any extra divs or headers

shankari · 2023-09-04T23:58:41Z

Closing this since it has been superceded by #1018

ctyrrellnrel changed the title ~~Initial commit, just added chart~~ Update Dashboard UI Jul 12, 2023

ctyrrellnrel added 4 commits July 11, 2023 17:56

Added view state to MetricsCard

c05e071

- allows the card to keep track of whether or not it has a BarChart or MetricDetails child component - next step - Add button

Added button to switch between components

011b858

- next step - format and style button

Added button and styling to MetricsCard

e36ba87

- button allows switching between the BarChart and the MetricDetails card - button icon switches depending on the card represented

ctyrrellnrel mentioned this pull request Jul 12, 2023

Revaluate the dashboard visual design e-mission/e-mission-docs#922

Closed

5 tasks

JGreenlee reviewed Jul 12, 2023

View reviewed changes

Removing unnecessary code

4440e1d

- removed children property from card - removed leftover code from copying from BarChart.tsx to MetricsCard and MetricDetails - Removed unecessary import statements

Added MetricsCard module to metrics.js

5ca9754

-- also switched main-metrics html so that only the MetricsCard element is held in the ion-slide element, without any extra divs or headers

JGreenlee mentioned this pull request Aug 21, 2023

📊 Rewrite of the New Dashboard Tab #1018

Merged

shankari closed this Sep 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Dashboard UI #1002

Update Dashboard UI #1002

ctyrrellnrel commented Jul 12, 2023

ctyrrellnrel commented Jul 12, 2023

ctyrrellnrel commented Jul 12, 2023

JGreenlee commented Jul 12, 2023

JGreenlee Jul 12, 2023

JGreenlee Jul 12, 2023

JGreenlee Jul 12, 2023

JGreenlee Jul 12, 2023

ctyrrellnrel commented Jul 13, 2023

JGreenlee commented Jul 14, 2023 •

edited

Loading

shankari commented Sep 4, 2023

Update Dashboard UI #1002

Update Dashboard UI #1002

Conversation

ctyrrellnrel commented Jul 12, 2023

ctyrrellnrel commented Jul 12, 2023

ctyrrellnrel commented Jul 12, 2023

Current State of PR

Images

JGreenlee commented Jul 12, 2023

JGreenlee Jul 12, 2023

Choose a reason for hiding this comment

JGreenlee Jul 12, 2023

Choose a reason for hiding this comment

JGreenlee Jul 12, 2023

Choose a reason for hiding this comment

JGreenlee Jul 12, 2023

Choose a reason for hiding this comment

ctyrrellnrel commented Jul 13, 2023

JGreenlee commented Jul 14, 2023 • edited Loading

shankari commented Sep 4, 2023

JGreenlee commented Jul 14, 2023 •

edited

Loading