Skip to content

Commit

Permalink
Merge branch 'main' into fix/hurumap_select_component
Browse files Browse the repository at this point in the history
  • Loading branch information
m453h authored Aug 13, 2024
2 parents 5212c72 + d54a423 commit 2456d37
Show file tree
Hide file tree
Showing 13 changed files with 307 additions and 22 deletions.
2 changes: 1 addition & 1 deletion apps/civicsignalblog/contrib/dokku/Dockerfile
Original file line number Diff line number Diff line change
@@ -1 +1 @@
FROM codeforafrica/codeforafrica-ui:0.1.7
FROM codeforafrica/codeforafrica-ui:0.1.8
3 changes: 2 additions & 1 deletion apps/civicsignalblog/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "civicsignalblog",
"version": "0.1.7",
"version": "0.1.8",
"private": true,
"author": "Code for Africa <[email protected]>",
"description": "This is the (temporary) CivicSignal blog",
Expand Down Expand Up @@ -47,6 +47,7 @@
"@next/env": "^14.2.5",
"@payloadcms/bundler-webpack": "^1.0.7",
"@payloadcms/db-mongodb": "^1.7.1",
"@payloadcms/live-preview": "^0.2.2",
"@payloadcms/live-preview-react": "^0.2.0",
"@payloadcms/plugin-cloud-storage": "^1.1.3",
"@payloadcms/plugin-nested-docs": "^1.0.12",
Expand Down
10 changes: 10 additions & 0 deletions apps/civicsignalblog/payload.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,16 @@ export default buildConfig({
admin: {
css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
user: Users.slug,
livePreview: {
breakpoints: [
{
label: "Mobile",
name: "mobile",
width: 375,
height: 667,
},
],
},
webpack: (config) => ({
...config,
resolve: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function ArticlePage({
}}
sx={{
width: "100%",
height: { xs: "163px", md: "600px" },
height: "40vw",
}}
/>
<ArticleHeader
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
class="MuiBox-root css-0"
>
<figure
class="MuiBox-root css-nxzwqu"
class="MuiBox-root css-1ne42gc"
>
<img
alt="Article"
Expand Down
3 changes: 2 additions & 1 deletion apps/civicsignalblog/src/pages/[...slugs].page.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useLivePreview } from "@payloadcms/live-preview-react";
import React from "react";
import { SWRConfig } from "swr";

Expand All @@ -9,6 +8,7 @@ import LongForm from "@/civicsignalblog/components/LongForm/LongForm";
import PageHeader from "@/civicsignalblog/components/PageHeader";
import RelatedStories from "@/civicsignalblog/components/RelatedStories";
import { getPageServerSideProps } from "@/civicsignalblog/lib/data";
import { useLivePreview } from "@/civicsignalblog/utils/useLivePreview";

const componentsBySlugs = {
article: ArticlePage,
Expand All @@ -25,6 +25,7 @@ function Index(initialData) {
depth: 2,
initialData,
});

const { blocks, fallback } = props;
if (!blocks?.length) {
return null;
Expand Down
53 changes: 53 additions & 0 deletions apps/civicsignalblog/src/utils/useLivePreview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { subscribe, unsubscribe, ready } from "@payloadcms/live-preview";
import { useCallback, useEffect, useState, useRef } from "react";

export const useLivePreview = (props) => {
const { depth = 0, initialData, serverURL } = props;
const [data, setData] = useState(initialData);
const [isLoading, setIsLoading] = useState(true);
const hasSentReadyMessage = useRef(false);

const onChange = useCallback((mergedData) => {
// When a change is made, the `onChange` callback will be called with the merged data
// Set this merged data into state so that React will re-render the UI
setData(mergedData);
setIsLoading(false);
}, []);

useEffect(() => {
// Listen for `window.postMessage` events from the Admin panel
// When a change is made, the `onChange` callback will be called with the merged data
const subscription = subscribe({
callback: onChange,
depth,
initialData,
serverURL,
});

// Once subscribed, send a `ready` message back up to the Admin panel
// This will indicate that the front-end is ready to receive messages
if (!hasSentReadyMessage.current) {
hasSentReadyMessage.current = true;

ready({
serverURL,
});
}

// When the component unmounts, unsubscribe from the `window.postMessage` events
return () => {
unsubscribe(subscription);
};
}, [serverURL, onChange, depth, initialData, hasSentReadyMessage]);

useEffect(() => {
setData(initialData);
}, [initialData]);

return {
data,
isLoading,
};
};

export default useLivePreview;
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import theme from "@/climatemappedafrica/theme";
const {
BarChartScope,
DonutChartScope,
HeatMapScope,
LineChartScope,
MultiLineChartScope,
TreemapChartScope,
Expand Down Expand Up @@ -61,6 +62,9 @@ export default function configureScope(
case "treemap":
vegaSpec = TreemapChartScope(scopeOptions);
break;
case "heatmap":
vegaSpec = HeatMapScope(scopeOptions);
break;
case "stacked":
if (isMobile) {
vegaSpec = VerticalStackedChartScope(scopeOptions);
Expand Down
4 changes: 4 additions & 0 deletions apps/pesayetu/src/components/HURUmap/Chart/configureScope.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import theme from "@/pesayetu/theme";
const {
BarChartScope,
DonutChartScope,
HeatMapScope,
LineChartScope,
MultiLineChartScope,
TreemapChartScope,
Expand Down Expand Up @@ -68,6 +69,9 @@ export default function configureScope(
vegaSpec = StackedChartScope(scopeOptions);
}
break;
case "heatmap":
vegaSpec = HeatMapScope(scopeOptions);
break;
default:
if (isMobile) {
vegaSpec = VerticalBarChartScope(scopeOptions);
Expand Down
2 changes: 1 addition & 1 deletion packages/hurumap-core/src/ChartTooltip/ChartTooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StyledEngineProvider } from "@mui/material/styles";
import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import Tooltip from "./Tooltip"; // Import your ChartTooltip component
import Tooltip from "./Tooltip";

function ChartTooltip({
id,
Expand Down
140 changes: 140 additions & 0 deletions packages/hurumap-core/src/Scope/HeatMapScope.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import merge from "deepmerge";

import Scope from "./Scope";

export default function HeatMapScope(props) {
const {
primaryData,
metadata,
config,
secondaryData,
primaryParentData,
secondaryParentData,
isCompare,
isMobile,
theme,
args,
} = props;

const { primary_group: primaryGroup } = metadata;

return merge(
Scope({
primaryData,
metadata,
config,
secondaryData,
primaryParentData,
secondaryParentData,
chartType: "heatmap",
theme,
args,
}),
{
height: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310,
signals: [
{
name: "height",
value: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310,
},
{
name: "isMobile",
value: isMobile,
},
{
name: "isCompare",
value: isCompare,
},
{ name: "stripeWidth", update: "width/length(data('primary'))" },
],
scales: [
{
name: "scaleX",
type: "linear",
domain: {
data: "primary",
field: primaryGroup,
},
range: [0, { signal: "width" }],
zero: false,
},
{
name: "color",
type: "linear",
domain: {
data: "primary",
field: {
signal: "datatype[Units]",
},
},
range: [theme.palette.secondary.main, theme.palette.primary.main],
reverse: true,
},
],
marks: [
{
name: "stripe",
type: "rect",
interactive: true,
from: {
data: "primary",
},
encode: {
enter: {
xc: {
scale: "scaleX",
field: primaryGroup,
},
fill: {
scale: "color",
field: {
signal: "datatype[Units]",
},
},
},
update: {
y: {
signal: 0,
},
height: {
signal: "height",
},
width: {
signal: "stripeWidth",
},
tooltip: {
signal: "{'group': datum[mainGroup], 'count': datum.count}",
},
},
hover: {
y: {
value: -4,
},
height: {
signal: "height + 8",
},
},
},
},
],
axes: [
{
scale: "scaleX",
orient: "bottom",
domain: false,
format: ".4",
labelColor: "black",
},
],
legends: [
{
fill: "color",
type: "gradient",
titleFontSize: 12,
titlePadding: 4,
gradientLength: { signal: "height" },
},
],
},
);
}
2 changes: 2 additions & 0 deletions packages/hurumap-core/src/Scope/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import BarChartScope from "./BarChartScope";
import DonutChartScope from "./DonutChartScope";
import HeatMapScope from "./HeatMapScope";
import LineChartScope from "./LineChartScope";
import MultiLineChartScope from "./MultiLineChartScope";
import Scope from "./Scope";
Expand All @@ -12,6 +13,7 @@ export default {
Scope,
BarChartScope,
DonutChartScope,
HeatMapScope,
LineChartScope,
MultiLineChartScope,
VerticalBarChartScope,
Expand Down
Loading

0 comments on commit 2456d37

Please sign in to comment.