Feature/UI improvements

frontend/src/components/Charts/FinancesBarChart.tsx

@@ -2,14 +2,17 @@ import { css } from '@mui/material';
 import {
   BarLabel,
   BarPlot,
+  ChartsLegend,
   ChartsReferenceLine,
   ChartsXAxis,
   ChartsYAxis,
+  DefaultChartsLegend,
   ResponsiveChartContainer,
   useDrawingArea,
   useYScale,
 } from '@mui/x-charts';
 import { ScaleLinear } from 'd3-scale';
+import { translate } from 'ol/transform';
 
 import { useTranslations } from '@frontend/stores/lang';
 
@@ -59,12 +62,27 @@ export function FinancesBarChart({ colors, barData, dataLabels, totalAmount, yAx
 
   function getTickInterval() {
     if (!yAxisScale) return 'auto';
-    return [0, yAxisScale.min / 2, yAxisScale.min, yAxisScale.max / 2, yAxisScale.max];
+
+    if (yAxisScale.min == 0) {
+      return [0, yAxisScale.max / 2, yAxisScale.max];
+    }
+    if (yAxisScale.max == 0) {
+      return [0, yAxisScale.min / 2, yAxisScale.min];
+    }
+
+    const interval = Math.max(Math.abs(yAxisScale.max), Math.abs(yAxisScale.min)) / 2;
+    return [
+      0,
+      yAxisScale.min,
+      yAxisScale.min + interval,
+      yAxisScale.max - interval,
+      yAxisScale.max,
+    ];
   }
 
   return (
     <ResponsiveChartContainer
-      height={220}
+      height={240}
       css={css`
         padding: 7px; // Dirty trick to display ticklabels
         & .MuiLineElement-root {
@@ -126,13 +144,35 @@ export function FinancesBarChart({ colors, barData, dataLabels, totalAmount, yAx
         }}
       />
       {refValue && (
-        <ChartsReferenceLine
-          y={refValue}
-          label={tr('financesChart.averageLineLabel')}
-          labelAlign="end"
-          lineStyle={{ stroke: '#4BA226', strokeWidth: 1, strokeDasharray: '6' }}
-          labelStyle={{ fontSize: 12, fill: labelColor }}
-        />
+        <>
+          <ChartsReferenceLine
+            y={refValue}
+            labelAlign="end"
+            lineStyle={{ stroke: '#4BA226', strokeWidth: 1, strokeDasharray: '6' }}
+          />
+          <ChartsLegend
+            slots={{
+              legend: () => {
+                const { width } = useDrawingArea();
+
+                return (
+                  <g transform={`translate(${width - 160}, 40)`}>
+                    <line
+                      x1="50"
+                      y1="-3"
+                      x2="80"
+                      y2="-3"
+                      style={{ stroke: '#4BA226', strokeWidth: 1, strokeDasharray: '6' }}
+                    />
+                    <text x={90} style={{ fontSize: 12, fill: labelColor }}>
+                      {tr('financesChart.averageLineLabel')}
+                    </text>
+                  </g>
+                );
+              },
+            }}
+          />
+        </>
       )}
       <ChartsXAxis position="bottom" axisId="x-axis-id" tickPlacement="middle" tickSize={4} />
       <ChartsYAxis

frontend/src/components/Charts/ProgressBar.tsx

@@ -16,10 +16,10 @@ export function ProgressBar({ fillPrecentage }: Props) {
     <div
       css={css`
         ${baseStyle}
-        margin: 0 1rem;
-        min-width: 200px;
+        margin: 0 1rem 0 auto;
+        width: min(40em, 40%);
+        flex: none;
         display: flex;
-        flex: 1;
         background-color: #fff;
         gap: 2px;
       `}

frontend/src/components/Charts/utils.ts

@@ -12,9 +12,10 @@ export function getYAxisScale(values: { max: number; min: number }) {
   const maxDatasetYValue = getYAxisScaleValue(values.max);
   const minDatasetYValue = getYAxisScaleValue(values.min);
 
+  const maxAbsoluteValue = Math.max(Math.abs(maxDatasetYValue), Math.abs(minDatasetYValue * 1.5));
+
   return {
-    max: maxDatasetYValue > 0 ? Math.max(Math.abs(minDatasetYValue) / 2, maxDatasetYValue) : 0,
-    min:
-      minDatasetYValue < 0 ? Math.min(Math.abs(maxDatasetYValue) / -2, minDatasetYValue * 1.5) : 0,
+    max: maxDatasetYValue > 0 ? maxAbsoluteValue : 0,
+    min: minDatasetYValue < 0 ? maxAbsoluteValue * -1 : 0,
   };
 }

frontend/src/components/Map/MapToolbar.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mui/icons-material';
 import { Box, Divider, IconButton, Tooltip } from '@mui/material';
 import { useState } from 'react';
-import { useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 
 import { useTranslations } from '@frontend/stores/lang';
 
@@ -140,6 +140,8 @@ export function MapToolbar(props: Props) {
   const tr = useTranslations();
   const [selectedTool, setSelectedTool] = useState<ToolType | null>(null);
   const { projectObjectId } = useParams() as { projectObjectId?: string };
+  const { pathname } = useLocation();
+  const isProjectObjectView = projectObjectId || pathname.includes('uusi-kohde');
 
   function handleToolClick(tool: ToolType | null) {
     if (tool === 'copyFromSelection' || tool === 'deleteAllFeatures') {
@@ -164,7 +166,7 @@ export function MapToolbar(props: Props) {
                 : typeof tool.tooltip === 'object'
                   ? tr(
                       tool.tooltip[props.geometryExists ? 'existing' : 'new'][
-                        projectObjectId ? 'projectObject' : 'project'
+                        isProjectObjectView ? 'projectObject' : 'project'
                       ],
                     )
                   : tr(tool.tooltip)

frontend/src/components/Map/MapWrapper.tsx

@@ -365,9 +365,12 @@ export const MapWrapper = forwardRef(function MapWrapper<
   function copySelectionToDrawSource() {
     const drawFeatureIds = drawSource.getFeatures().map((feature) => olUtil.getUid(feature));
     const selectionFeatures = selectionSource.getFeatures();
-    const featuresToCopy = selectionFeatures.filter(
-      (feature) => !drawFeatureIds.includes(olUtil.getUid(feature)),
-    );
+    const featuresToCopy = selectionFeatures
+      .filter((feature) => !drawFeatureIds.includes(olUtil.getUid(feature)))
+      .map((feature) => {
+        feature.setProperties({ editing: true });
+        return feature;
+      });
     drawSource.addFeatures(featuresToCopy);
     selectionSource.clear();
     drawFinished();

frontend/src/components/Map/styles.ts

@@ -521,15 +521,25 @@ const _PROJ_OBJ_DRAW_FILL = _PROJ_OBJ_FILL;
 const _PROJ_OBJ_DRAW_STROKE = _PROJ_OBJ_STROKE;
 const _PROJ_OBJ_DRAW_STROKE_WIDTH = 2;
 
-export const PROJ_OBJ_DRAW_STYLE = new Style({
-  fill: new Fill({
-    color: _PROJ_OBJ_DRAW_FILL,
+export const PROJ_OBJ_DRAW_STYLE = [
+  new Style({
+    fill: new Fill({
+      color: _PROJ_OBJ_DRAW_FILL,
+    }),
+    stroke: new Stroke({
+      color: _PROJ_OBJ_DRAW_STROKE,
+      width: _PROJ_OBJ_DRAW_STROKE_WIDTH,
+    }),
+    zIndex: 1,
   }),
-  stroke: new Stroke({
-    color: _PROJ_OBJ_DRAW_STROKE,
-    width: _PROJ_OBJ_DRAW_STROKE_WIDTH,
+  new Style({
+    stroke: new Stroke({
+      color: _DEFAULT_HIGHLIGHT_STROKE,
+      width: _PROJECT_STROKE_WIDTH + 4,
+    }),
+    zIndex: 0,
   }),
-});
+];
 
 export function getStyleWithPointIcon(styleLike: StyleLike, isFaded: boolean): StyleFunction {
   return function (feature: FeatureLike, resolution: number) {

frontend/src/views/Project/BudgetTable.tsx

@@ -166,7 +166,15 @@ export const BudgetTable = forwardRef(function BudgetTable(props: Props, ref) {
   return !budget ? null : (
     <>
       <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} autoComplete="off">
+        <form
+          css={css`
+            & .MuiFormControl-root {
+              margin: 0;
+            }
+          `}
+          onSubmit={form.handleSubmit(onSubmit)}
+          autoComplete="off"
+        >
           <TableContainer>
             <Table size="small">
               <TableHead
@@ -341,10 +349,18 @@ export const BudgetTable = forwardRef(function BudgetTable(props: Props, ref) {
                     {fields?.includes('actual') && (
                       <TableCell>
                         {!props.actualsLoading ? (
-                          <CurrencyInput
-                            directlyHandleValueChange
-                            value={props.actuals?.find((data) => data.year === year)?.total ?? null}
-                          />
+                          <Box
+                            css={css`
+                              margin: 8px 4px;
+                            `}
+                          >
+                            <CurrencyInput
+                              directlyHandleValueChange
+                              value={
+                                props.actuals?.find((data) => data.year === year)?.total ?? null
+                              }
+                            />
+                          </Box>
                         ) : (
                           <Skeleton
                             variant="rectangular"

frontend/src/views/Project/ProjectFinancesCharts.tsx

@@ -43,6 +43,7 @@ export function ProjectFinancesCharts(props: Props) {
     startYear: props.startYear,
     endYear: props.endYear,
   });
+
   const budget = trpc.project.getBudget.useQuery(
     { projectId: props.projectId },
     { enabled: Boolean(monthlyActuals.data) },

frontend/src/views/Task/TaskRow.tsx

@@ -12,10 +12,18 @@ interface Props {
 
 export function TaskRow(props: Readonly<Props>) {
   const tr = useTranslations();
+
+  function getActivityDescription() {
+    if (!props.task.activityId && !props.task.description) {
+      return tr('task.noActivityDescription');
+    }
+    return `${props.task.activityId ?? ''} ${props.task.description ?? ''}`;
+  }
+
   return (
     <>
       <TableRow>
-        <TableCell>{props.task.description ?? tr('task.noActivityDescription')}</TableCell>
+        <TableCell>{getActivityDescription()}</TableCell>
         <TableCell>{formatCurrency(props.task.total)}</TableCell>
       </TableRow>
     </>

shared/src/language/fi.ts

@@ -620,10 +620,10 @@ export const fi = {
   'dataTable.noData': 'Ei hakutuloksia.',
   'financesChart.averageLineLabel': 'Talousarvio/kuukausi',
   'financesChart.totalLabel': 'Yhteensä',
-  'financesChart.noTotalLabel': 'Ei kuluja tänä vuonna',
+  'financesChart.noTotalLabel': 'Ei kuluja tänä vuonna.',
   'financesChart.totalsErrorLabel': 'Virhe haettaessa toteumatietoja',
   'financesChart.amountLabel': 'Talousarvio',
-  'financesChart.noAmountLabel': 'Talousarvio puuttuu',
+  'financesChart.noAmountLabel': 'Talousarvio puuttuu.',
   'financesChart.loading': 'Ladataan toteumia...',
   'itemInfoBox.dateRange': 'Aikaväli',
   'itemInfoBox.lifecycleState': 'Elinkaaritila',