Added level progress labels

src/wanikani/WanikaniHistory.jsx

@@ -16,7 +16,7 @@ function LoadableChart({placeholderTitle, children}) {
     const [isLoaded, setIsLoaded] = useState(false)
     return (
         <ReactVisibilitySensor partialVisibility={true} onChange={(isVisible) => isVisible ? setIsLoaded(true) : null}>
-            <Card variant={'outlined'} style={{margin: '15px'}}>
+            <Card style={{margin: '15px'}}>
                 {isLoaded ? children : (
                     <div style={{height: '500px', textAlign: 'center'}}>
                         <Typography variant={'h5'}>{placeholderTitle}</Typography>

src/wanikani/components/WanikaniFutureReviewsChart.jsx

@@ -106,21 +106,6 @@ async function fetchFutureReviews() {
     return data.filter(assignment => !assignment.data['burned_at'] || !assignment.data['available_at']);
 }
 
-function SimpleBar({x, y, width, offsetY, fill, style}) {
-    const path = `M ${x} ${offsetY}
-   L ${width + x} ${offsetY}
-   L ${width + x} ${y}
-   L ${x} ${y}
-   Z`;
-
-    return (
-        <path d={path}
-              fill={fill}
-              style={style}
-        />
-    );
-}
-
 function WanikaniFutureReviewsChart() {
     const [rawData, setRawData] = useState([]);
     const [initialReviewCount, setInitialReviewCount] = useState(0);
@@ -213,24 +198,15 @@ function WanikaniFutureReviewsChart() {
         return false;
     }
 
-    function BarWithLabel({
-                              arg, barWidth, maxBarWidth, val, startVal,
-                              color, value, style, seriesIndex, index
-                          }) {
+    function BarWithLabel(props) {
+        const {arg, val, value, seriesIndex, index} = props;
+
         if (value === 0)
             return (<></>);
 
-        const width = maxBarWidth * barWidth;
-
         return (
             <>
-                <SimpleBar x={arg - width / 2}
-                           width={width}
-                           y={val}
-                           offsetY={startVal}
-                           fill={color}
-                           style={style}
-                />
+                <BarSeries.Point {...props}/>
 
                 {isLabelVisible(seriesIndex, index) ? (
                     <Chart.Label

src/wanikani/components/WanikaniLevelProgressChart.jsx

@@ -3,10 +3,18 @@ import {useState, useEffect} from "react";
 import WanikaniApiService from "../service/WanikaniApiService.js";
 import {EventTracker, Animation} from "@devexpress/dx-react-chart";
 
-function LevelToolTip({text}) {
+function parseTimestamp(text) {
     const millis = parseFloat(text) * 86400000;
     const hours = Math.floor((millis % 86400000) / 3600000);
     const days = Math.floor(parseFloat(text));
+    return {
+        hours,
+        days
+    };
+}
+
+function LevelToolTip({text}) {
+    const {days, hours} = parseTimestamp(text);
     return (
         <div>
             Days: {days}
@@ -44,6 +52,56 @@ function WanikaniLevelProgressChart() {
         return () => isSubscribed = false;
     }, []);
 
+    function BarWithLabel(props) {
+        const {arg, val, index} = props;
+        const {days, hours} = parseTimestamp(levelProgress[index].days)
+        const [animationStyle, setAnimationStyle] = useState({opacity: '0'});
+        const animationInitialDelay = 1_000;
+
+        useEffect(() => {
+            const startAnimation = setTimeout(() => {
+                setAnimationStyle({
+                    opacity: '1',
+                    transition: 'opacity 1s'
+                });
+            }, animationInitialDelay)
+
+            return () => clearTimeout(startAnimation);
+        }, []);
+
+        return (
+            <>
+                <BarSeries.Point {...props}
+                                 animation={(startCoords, endCoords, processAnimation, setAttributes, delay) => {
+                                     console.log({startCoords, endCoords, processAnimation, setAttributes, delay})
+                                     return props.animation(startCoords, endCoords, processAnimation, setAttributes, delay)
+                                 }}/>
+
+                {days > 0 ? (
+                    <Chart.Label
+                        x={arg}
+                        y={val - 25}
+                        textAnchor={'middle'}
+                        style={{...animationStyle, fill: 'white', fontWeight: 'bold'}}
+                    >
+                        {days} d
+                    </Chart.Label>
+                ) : null}
+
+                {hours > 0 ? (
+                    <Chart.Label
+                        x={arg}
+                        y={val - 10}
+                        textAnchor={'middle'}
+                        style={{...animationStyle, fill: 'white', fontWeight: 'bold'}}
+                    >
+                        {hours} h
+                    </Chart.Label>
+                ) : null}
+            </>
+        );
+    }
+
     return (
         <Chart data={levelProgress}>
             <ValueAxis/>
@@ -52,6 +110,7 @@ function WanikaniLevelProgressChart() {
             <BarSeries
                 valueField="days"
                 argumentField="level"
+                pointComponent={BarWithLabel}
             />
             <EventTracker/>
             <Animation/>