feat(core): details map

superset-frontend/plugins/plugin-chart-handlebars/package.json

@@ -29,8 +29,7 @@
   "dependencies": {
     "handlebars": "^4.7.7",
     "just-handlebars-helpers": "^1.0.19",
-    "react-map-gl": "^7.1.7",
-    "viewport-mercator-project": "^7.0.4"
+    "react-map-gl": "^6.1.19"
   },
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",

superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable theme-colors/no-literal-colors */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -21,6 +22,9 @@ import React, { createRef } from 'react';
 import { HandlebarsViewer } from './components/Handlebars/HandlebarsViewer';
 import { HandlebarsProps, HandlebarsStylesProps } from './types';
 import Map from './components/Map';
+import CallIcon from './icons/call.svg';
+import PinIcon from './icons/pin.svg';
+import GlobeIcon from './icons/globe.svg';
 
 const Styles = styled.div<HandlebarsStylesProps>`
   padding: ${({ theme }) => theme.gridUnit * 4}px;
@@ -38,6 +42,73 @@ const Styles = styled.div<HandlebarsStylesProps>`
     `};
 `;
 
+const Conteiner = styled.div`
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 16px 16px 20px;
+  background: #f4f6fa;
+`;
+
+const WrapperDetails = styled.div`
+  height: 100%;
+  padding-right: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Divider = styled.div`
+  width: 100%;
+  background: #e6e9f4;
+  height: 1px;
+  margin: 10px 0px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  row-gap: 10px;
+  flex-direction: column;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  row-gap: 16px;
+  flex-direction: column;
+`;
+
+const Item = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+`;
+
+const Title = styled.span`
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #31323f;
+`;
+
+const Bold = styled.span`
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  color: #5a607f;
+`;
+
+const Text = styled.span`
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #5a607f;
+`;
+
 export default function Handlebars(props: HandlebarsProps) {
   const { data, height, width, formData } = props;
   const styleTemplateSource = formData.styleTemplate
@@ -57,10 +128,65 @@ export default function Handlebars(props: HandlebarsProps) {
       width={width}
       fullDisplay={formData?.fullDisplay}
     >
-      {props?.formData?.showMap && props?.mapboxApiKey && (
-        <Map mapboxApiKey={props?.mapboxApiKey} />
+      {props?.formData?.showMap ? (
+        <Conteiner>
+          <WrapperDetails>
+            <Header>
+              <Title>{data[0].hospital_name}</Title>
+              {data[0]?.id && (
+                <div>
+                  <Text>
+                    <Bold>AllClinics ID:</Bold>
+                    {` ${data[0]?.id}`}
+                  </Text>
+                </div>
+              )}
+              {data[0]?.description && (
+                <div>
+                  <Text>
+                    <Bold>Descriptions:</Bold>
+                    {` ${data[0]?.description}`}
+                  </Text>
+                </div>
+              )}
+            </Header>
+            <Divider />
+            <Footer>
+              {data[0]?.address && (
+                <Item>
+                  <PinIcon />
+                  <Text>{data[0].address}</Text>
+                </Item>
+              )}
+              {data[0]?.phone && (
+                <Item>
+                  <CallIcon />
+                  <Text>{data[0]?.phone}</Text>
+                </Item>
+              )}
+              {data[0]?.website && (
+                <Item>
+                  <GlobeIcon />
+                  <Text>{data[0].website}</Text>
+                </Item>
+              )}
+            </Footer>
+          </WrapperDetails>
+          {props?.mapboxApiKey && data[0]?.latitude && data[0]?.longitude && (
+            <Map
+              latitude={
+                typeof data[0]?.latitude === 'number' ? data[0].latitude : 0
+              }
+              longitude={
+                typeof data[0]?.longitude === 'number' ? data[0].longitude : 0
+              }
+              mapboxApiKey={props?.mapboxApiKey}
+            />
+          )}
+        </Conteiner>
+      ) : (
+        <HandlebarsViewer data={{ data }} templateSource={templateSource} />
       )}
-      <HandlebarsViewer data={{ data }} templateSource={templateSource} />
     </Styles>
   );
 }

superset-frontend/plugins/plugin-chart-handlebars/src/components/Map/Map.interface.ts

@@ -17,5 +17,7 @@
  * under the License.
  */
 export interface MapProps {
+  latitude: number;
+  longitude: number;
   mapboxApiKey: string;
 }

superset-frontend/plugins/plugin-chart-handlebars/src/components/Map/Map.styled.ts

@@ -0,0 +1,30 @@
+/* eslint-disable theme-colors/no-literal-colors */
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled } from '@superset-ui/core';
+
+export const Wrapper = styled.div`
+  border-radius: ${({ theme }) => theme.gridUnit * 5}px;
+  border: 1px solid #e6e9f4;
+  overflow: auto;
+  width: 350px;
+  height: 240px;
+  min-width: 350px;
+  min-height: 240px;
+`;

superset-frontend/plugins/plugin-chart-handlebars/src/components/Map/Map.tsx

@@ -16,43 +16,48 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// @ts-nocheck
 // eslint-disable-next-line import/no-extraneous-dependencies
-import ViewportMercator from 'viewport-mercator-project';
-import React, { useState, type FC } from 'react';
-import MapGL from 'react-map-gl';
+import React, { useState, useEffect, useCallback, type FC } from 'react';
+import MapGL, { Marker, ViewState } from 'react-map-gl';
 import { MapProps } from './Map.interface';
+import { Wrapper } from './Map.styled';
+import Point from '../../icons/point.svg';
 
-const Map: FC<MapProps> = ({ mapboxApiKey }) => {
-  const mercator = new ViewportMercator({
-    width: 200,
-    height: 200,
-  }).fitBounds([
-    [-123.802, 25.9807],
-    [-93.9857, 41.7194],
-  ]);
-  const { latitude, longitude, zoom } = mercator;
+const Map: FC<MapProps> = ({ mapboxApiKey, latitude, longitude }) => {
+  const [viewport, setViewport] = useState({
+    latitude,
+    longitude,
+    zoom: 15,
+  });
 
-  const [state] = useState({
-    viewport: {
-      longitude,
+  useEffect(() => {
+    setViewport({
       latitude,
-      zoom,
-    },
-  });
+      longitude,
+      zoom: 15,
+    });
+  }, [latitude, longitude]);
 
-  const handleViewportChange = () => {};
+  const handleViewportChange = useCallback((newViewport: ViewState) => {
+    setViewport(newViewport);
+  }, []);
 
   return (
-    <MapGL
-      {...state.viewport}
-      mapStyle="mapbox://styles/mapbox/light-v9"
-      width={200}
-      height={200}
-      mapboxApiAccessToken={mapboxApiKey}
-      onViewportChange={handleViewportChange}
-      preserveDrawingBuffer
-    />
+    <Wrapper>
+      <MapGL
+        {...viewport}
+        mapStyle="mapbox://styles/mapbox/light-v9"
+        mapboxApiAccessToken={mapboxApiKey}
+        onViewportChange={handleViewportChange}
+        preserveDrawingBuffer
+        width={350}
+        height={240}
+      >
+        <Marker longitude={longitude} latitude={latitude}>
+          <Point />
+        </Marker>
+      </MapGL>
+    </Wrapper>
   );
 };
 

superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts

@@ -16,6 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
 declare module '*.png' {
   const value: any;
   export default value;