Merge branch 'dev' of https://github.com/umami-software/umami into dev

src/components/charts/BarChart.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState } from 'react';
 export interface BarChartProps extends ChartProps {
   unit: string;
   stacked?: boolean;
+  currency?: string;
   renderXLabel?: (label: string, index: number, values: any[]) => string;
   renderYLabel?: (label: string, index: number, values: any[]) => string;
   XAxisType?: string;
@@ -27,6 +28,7 @@ export function BarChart(props: BarChartProps) {
     stacked = false,
     minDate,
     maxDate,
+    currency,
   } = props;
 
   const options: any = useMemo(() => {
@@ -76,7 +78,9 @@ export function BarChart(props: BarChartProps) {
   const handleTooltip = ({ tooltip }: { tooltip: any }) => {
     const { opacity } = tooltip;
 
-    setTooltip(opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} /> : null);
+    setTooltip(
+      opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} currency={currency} /> : null,
+    );
   };
 
   return (

src/components/charts/BarChartTooltip.tsx

@@ -1,7 +1,7 @@
-import { formatDate } from 'lib/date';
-import { Flexbox, StatusLight } from 'react-basics';
-import { formatLongNumber } from 'lib/format';
 import { useLocale } from 'components/hooks';
+import { formatDate } from 'lib/date';
+import { formatLongCurrency, formatLongNumber } from 'lib/format';
+import { Flexbox, StatusLight } from 'react-basics';
 
 const formats = {
   millisecond: 'T',
@@ -15,7 +15,7 @@ const formats = {
   year: 'yyyy',
 };
 
-export default function BarChartTooltip({ tooltip, unit }) {
+export default function BarChartTooltip({ tooltip, unit, currency }) {
   const { locale } = useLocale();
   const { labelColors, dataPoints } = tooltip;
 
@@ -26,7 +26,10 @@ export default function BarChartTooltip({ tooltip, unit }) {
       </div>
       <div>
         <StatusLight color={labelColors?.[0]?.backgroundColor}>
-          {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+          {currency
+            ? formatLongCurrency(dataPoints[0].raw.y, currency)
+            : formatLongNumber(dataPoints[0].raw.y)}{' '}
+          {dataPoints[0].dataset.label}
         </StatusLight>
       </div>
     </Flexbox>

src/components/hooks/queries/useEventDataValues.ts

@@ -12,7 +12,7 @@ export function useEventDataValues(
   const params = useFilterParams(websiteId);
 
   return useQuery<any>({
-    queryKey: ['websites:event-data:values', { websiteId, propertyName, ...params }],
+    queryKey: ['websites:event-data:values', { websiteId, eventName, propertyName, ...params }],
     queryFn: () =>
       get(`/websites/${websiteId}/event-data/values`, { ...params, eventName, propertyName }),
     enabled: !!(websiteId && propertyName),

src/components/messages.ts

@@ -114,8 +114,6 @@ export const labels = defineMessages({
   none: { id: 'label.none', defaultMessage: 'None' },
   clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
   property: { id: 'label.property', defaultMessage: 'Property' },
-  revenueProperty: { id: 'label.revenue-property', defaultMessage: 'Revenue Property' },
-  userProperty: { id: 'label.user-property', defaultMessage: 'User Property' },
   today: { id: 'label.today', defaultMessage: 'Today' },
   lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
@@ -162,8 +160,9 @@ export const labels = defineMessages({
   revenue: { id: 'label.revenue', defaultMessage: 'Revenue' },
   revenueDescription: {
     id: 'label.revenue-description',
-    defaultMessage: 'Look into your revenue across time.',
+    defaultMessage: 'Look into your revenue data and how users are spending.',
   },
+  currency: { id: 'label.currency', defaultMessage: 'Currency' },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   path: { id: 'label.path', defaultMessage: 'Path' },