feat(user-heatmap): add number dashboard

Author: mydearxym

containers/UsersThread/NumDashboard.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import R from 'ramda'
+
+// import { ICON_CMD } from '../../config'
+import DotDivider from 'components/DotDivider'
+import {
+  Wrapper,
+  SumWrapper,
+  DetailText,
+  DashboardListWrapper,
+  DashItem,
+  Divider,
+  Title,
+  Num,
+  Chart,
+  ChartBar,
+} from './styles/num_dashboard'
+
+import { ToggleNumBashboard } from './logic'
+
+export const sortByValue = source => R.sort((a, b) => b.value - a.value, source)
+
+const NumDashboard = ({ total, geoData, expand }) => {
+  if (R.isEmpty(geoData)) return null
+
+  const sortGeo = sortByValue(geoData) || []
+  const maxValue = sortGeo[0].value || 0
+
+  return (
+    <Wrapper expand={expand}>
+      <SumWrapper>
+        总人数: {total} <DotDivider />{' '}
+        <DetailText onClick={ToggleNumBashboard}>
+          {expand ? '收起' : '详情'}
+        </DetailText>
+      </SumWrapper>
+      {expand && (
+        <DashboardListWrapper>
+          {sortGeo.map((item, idx) => (
+            <div key={item.lant + item.long}>
+              <DashItem>
+                <Title active={idx <= 2}>{item.city}</Title>
+                <DotDivider radius="3px" space="3px" />
+                <Num>{item.value}人</Num>
+                <Chart>
+                  <ChartBar
+                    width={`${Math.floor((item.value / maxValue) * 100)}%`}
+                    active={idx <= 2}
+                  />
+                </Chart>
+              </DashItem>
+              <Divider show={idx === 2} />
+            </div>
+          ))}
+        </DashboardListWrapper>
+      )}
+    </Wrapper>
+  )
+}
+
+export default NumDashboard

containers/UsersThread/geo_data.js

@@ -1,9 +1,10 @@
 //
 /* import { fetch } from 'whatwg-fetch' */
+import { ASSETS_ENDPOINT } from 'config'
 import fetch from 'isomorphic-fetch'
 import { BStore } from 'utils'
 
-const endpoint = 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/asia.geo.json'
+const endpoint = `${ASSETS_ENDPOINT}/asia.geo.json`
 const bkey = 'asia.geo.data'
 
 const fetchGeoData = () =>

containers/UsersThread/index.js

@@ -9,8 +9,11 @@ import { inject, observer } from 'mobx-react'
 import dynamic from 'next/dynamic'
 
 import { makeDebugger, storePlug } from 'utils'
+
+import NumDashboard from './NumDashboard'
 import MapLoading from './MapLoading'
 
+import { Wrapper } from './styles'
 import * as logic from './logic'
 
 /* eslint-disable-next-line */
@@ -52,18 +55,31 @@ class UsersThreadContainer extends React.Component {
 
   render() {
     const { usersThread } = this.props
-    const { geoInfosData, geoDataLoading, curTheme } = usersThread
+    const {
+      geoInfosData,
+      geoDataLoading,
+      curCommunity,
+      curTheme,
+      showNums,
+    } = usersThread
 
     const ready = GeoMapSSR !== null && !geoDataLoading
 
     return (
-      <React.Fragment>
+      <Wrapper>
+        {ready && (
+          <NumDashboard
+            expand={showNums}
+            total={curCommunity.subscribersCount}
+            geoData={geoInfosData}
+          />
+        )}
         {ready ? (
           <GeoMapSSR markers={geoInfosData} curTheme={curTheme} />
         ) : (
           <MapLoading />
         )}
-      </React.Fragment>
+      </Wrapper>
     )
   }
 }

containers/UsersThread/logic.js

@@ -25,6 +25,9 @@ export const loadGeoData = () => {
   sr71$.query(S.communityGeoInfo, { id })
 }
 
+export const ToggleNumBashboard = () =>
+  store.markState({ showNums: !store.showNums })
+
 const markLoading = (maybe = true) => store.markState({ geoDataLoading: maybe })
 // ###############################
 // Data & Error handlers

containers/UsersThread/store.js

@@ -22,6 +22,7 @@ const UsersThread = t
     geoInfos: t.optional(t.array(Geo), []),
     geoDataLoading: t.optional(t.boolean, false),
     // { city: '成都', value: 1, long: 104.06, lant: 30.67 }
+    showNums: t.optional(t.boolean, false),
   })
   .views(self => ({
     get root() {

containers/UsersThread/styles/index.js

@@ -3,7 +3,10 @@ import styled from 'styled-components'
 // import Img from 'components/Img'
 // import { theme } from 'utils'
 
-export const Wrapper = styled.div``
+export const Wrapper = styled.div`
+  width: 100%;
+  position: relative;
+`
 export const Title = styled.div``
 
 export const MapWrapper = styled.div`

containers/UsersThread/styles/num_dashboard.js

@@ -0,0 +1,77 @@
+import styled from 'styled-components'
+
+// import Img from '../../../components/Img'
+import { theme, cs } from '../../../utils'
+
+export const Wrapper = styled.div`
+  ${cs.flexColumn()};
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  left: 40px;
+  background: ${theme('content.cardBg')};
+  padding: 2px;
+  border-radius: 5px;
+  width: ${({ expand }) => (expand ? '200px' : '150px')};
+  transition: width 0.2s linear;
+`
+
+export const SumWrapper = styled.div`
+  ${cs.flex('align-both')};
+  color: ${theme('thread.articleDigest')};
+`
+
+export const DetailText = styled.div`
+  color: ${theme('thread.articleDigest')};
+  &:hover {
+    color: ${theme('thread.articleTitle')};
+    cursor: pointer;
+  }
+`
+export const DashboardListWrapper = styled.div`
+  background: ${theme('content.cardBg')};
+  min-height: 200px;
+  max-height: 60vh;
+  margin-top: 3px;
+  padding-top: 2px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 5px;
+  overflow-y: scroll;
+`
+export const DashItem = styled.div`
+  ${cs.flex('align-center')};
+`
+export const Title = styled.div`
+  color: ${({ active }) =>
+    active ? theme('banner.title') : theme('thread.articleDigest')};
+  width: 60px;
+  text-align: center;
+`
+
+export const Divider = styled.div`
+  display: ${({ show }) => (show ? 'block' : 'none')};
+  border-bottom: 1px dashed;
+  border-bottom-color: ${theme('thread.articleDigest')};
+  margin-top: 4px;
+  margin-bottom: 4px;
+  width: 80%;
+  margin-left: 8%;
+  opacity: 0.5;
+`
+
+export const Num = styled.div`
+  color: ${theme('thread.articleDigest')};
+  width: 50px;
+  text-align: left;
+`
+export const Chart = styled.div`
+  ${cs.flexGrow()};
+`
+export const ChartBar = styled.div`
+  height: ${({ active }) => (active ? '4px' : '3px')};
+
+  width: ${({ width }) => width};
+  background: ${({ active }) =>
+    active ? theme('geoMap.markerBg') : theme('thread.articleDigest')};
+`