rendering fix

mnsrulz · Oct 24, 2024 · b941cc7 · b941cc7
1 parent 240f6e7
commit b941cc7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/src/components/ConditionalFormattingBox.tsx b/src/components/ConditionalFormattingBox.tsx
@@ -10,7 +10,7 @@ export const ConditionalFormattingBox = (props: IConditionalFormattingBoxProps)
                 backgroundColor: color,
                 width: "100%",
                 height: "100%",
-                padding: "2px",
+                padding: "2px", //padding seems to have no effect???
                 display: 'flex',
                 alignItems: 'center', // Align content vertically
                 justifyContent: 'flex-end'

diff --git a/src/components/HeatMap.tsx b/src/components/HeatMap.tsx
@@ -11,7 +11,7 @@ type MyProps = {
     data: number[][],
     formatter: 'percent' | 'number'
 }
-const formatters = {'percent': percentageFormatter, number: numberFormatter}
+const formatters = { 'percent': percentageFormatter, number: numberFormatter }
 export const HeatMap = (props: MyProps) => {
     const { xLabels, yLabels, data, formatter } = props;
     const fmt = formatters[formatter];
@@ -39,11 +39,11 @@ export const HeatMap = (props: MyProps) => {
                         key={`row-${ix}`}
                         sx={{ '&:last-child td, &:last-child th': { border: 0 }, padding: 0 }}
                     >
-                        <TableCell key={`${ix}-${yLabels[ix]}`} component="th" scope="row" sx={{ width: 100, px: 1 }}>
+                        <TableCell key={`${ix}-${yLabels[ix]}`} component="th" scope="row" sx={{ flex: 1, px: 1, textAlign: 'right' }}>
                             {yLabels[ix]}
                         </TableCell>
                         {
-                            row.map((c, ixx) => <TableCell key={`${ix}-${ixx}`} align="right" sx={{ padding: 0, width: 80, height: '32px' }} padding="none">
+                            row.map((c, ixx) => <TableCell key={`${ix}-${ixx}`} align="right" sx={{ flex: 1, height: '32px' }}>
                                 {/* {row[`d${c}`]} */}
                                 <ConditionalFormattingBox value={c * 1000} formattedValue={`${fmt(c)}`} />
                             </TableCell>)

diff --git a/src/components/HistoricalSeason.tsx b/src/components/HistoricalSeason.tsx
@@ -11,26 +11,26 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 dayjs.extend(customParseFormat);
 
 const months = [
-    'January',
-    'February',
-    'March',
-    'April',
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
     'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
 ];
 
 const days = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday'
+    'Mon',
+    'Tue',
+    'Wed',
+    'Thu',
+    'Fri'
 ]
 
 enum DataMode {
@@ -77,7 +77,7 @@ function getDailyData(dt: HistoricalDataResponse) {
     const firstMonday = dayjs(startDate.subtract(startDate.day() - 1).format('YYYY-MM-DD'), 'YYYY-MM-DD', true);
     const numberOfWeeks = endDate.diff(startDate, 'w') + 1;
     const ys = [...Array(numberOfWeeks).keys()].reduce((j: string[], c) => {
-        j.push(`${firstMonday.add(c, 'w').format('DD MMM YYYY')}`);
+        j.push(`${firstMonday.add(c, 'w').format('DD MMM YY')}`);
         return j;
     }, []);
     let lastClosingPrice = 0;