readr-media · ChangRongXuan · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023
diff --git a/packages/election-widgets/package.json b/packages/election-widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@readr-media/react-election-widgets",
-  "version": "1.0.6",
+  "version": "1.1.0-alpha.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

diff --git a/packages/election-widgets/src/votes-comparison/react-components/icons.js b/packages/election-widgets/src/votes-comparison/react-components/icons.js
@@ -47,15 +47,15 @@ export function ElectedIcon() {
 export function AnonymousIcon() {
   return (
     <svg
-      width="40"
-      height="40"
-      viewBox="0 0 40 40"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="20" cy="20" r="20" fill="#838383" />
+      <circle cx="16" cy="16" r="16" fill="#838383" />
       <path
-        d="M11.5576 31.5264H28.4424C29.1533 31.5264 29.7119 31.3656 30.1182 31.0439C30.5244 30.7308 30.7275 30.2907 30.7275 29.7236C30.7275 28.9196 30.4779 28.0648 29.9785 27.1592C29.4792 26.2536 28.7598 25.4115 27.8203 24.6328C26.8893 23.8457 25.7637 23.2067 24.4434 22.7158C23.123 22.2165 21.6377 21.9668 19.9873 21.9668C18.3454 21.9668 16.8643 22.2165 15.5439 22.7158C14.2236 23.2067 13.0938 23.8457 12.1543 24.6328C11.2233 25.4115 10.5081 26.2536 10.0088 27.1592C9.5179 28.0648 9.27246 28.9196 9.27246 29.7236C9.27246 30.2907 9.47559 30.7308 9.88184 31.0439C10.2881 31.3656 10.8467 31.5264 11.5576 31.5264ZM20 19.7197C20.9225 19.7197 21.7731 19.4701 22.5518 18.9707C23.3304 18.4714 23.9525 17.7985 24.418 16.9521C24.8919 16.0973 25.1289 15.1367 25.1289 14.0703C25.1289 13.0378 24.8919 12.1068 24.418 11.2773C23.9525 10.4395 23.3304 9.7793 22.5518 9.29688C21.7731 8.81445 20.9225 8.57324 20 8.57324C19.0859 8.57324 18.2396 8.81868 17.4609 9.30957C16.6823 9.80046 16.056 10.4648 15.582 11.3027C15.1165 12.1322 14.8838 13.0632 14.8838 14.0957C14.8838 15.1536 15.1165 16.1058 15.582 16.9521C16.056 17.7985 16.6781 18.4714 17.4482 18.9707C18.2269 19.4701 19.0775 19.7197 20 19.7197Z"
+        d="M9.50586 24.9434C8.95898 24.9434 8.5293 24.8197 8.2168 24.5723C7.9043 24.3314 7.74805 23.9928 7.74805 23.5566C7.74805 22.9382 7.93685 22.2806 8.31445 21.584C8.69857 20.8874 9.2487 20.2396 9.96484 19.6406C10.6875 19.0352 11.5566 18.5436 12.5723 18.166C13.5879 17.7819 14.7272 17.5898 15.9902 17.5898C17.2598 17.5898 18.4023 17.7819 19.418 18.166C20.4336 18.5436 21.2995 19.0352 22.0156 19.6406C22.7383 20.2396 23.2917 20.8874 23.6758 21.584C24.0599 22.2806 24.252 22.9382 24.252 23.5566C24.252 23.9928 24.0957 24.3314 23.7832 24.5723C23.4707 24.8197 23.041 24.9434 22.4941 24.9434H9.50586ZM16 15.8613C15.2904 15.8613 14.6361 15.6693 14.0371 15.2852C13.4447 14.901 12.9661 14.3835 12.6016 13.7324C12.2435 13.0814 12.0645 12.349 12.0645 11.5352C12.0645 10.7409 12.2435 10.0247 12.6016 9.38672C12.9661 8.74219 13.4479 8.23112 14.0469 7.85352C14.6458 7.47591 15.2969 7.28711 16 7.28711C16.7096 7.28711 17.3639 7.47266 17.9629 7.84375C18.5618 8.21484 19.0404 8.72266 19.3984 9.36719C19.763 10.0052 19.9453 10.7214 19.9453 11.5156C19.9453 12.3359 19.763 13.0749 19.3984 13.7324C19.0404 14.3835 18.5618 14.901 17.9629 15.2852C17.3639 15.6693 16.7096 15.8613 16 15.8613Z"
         fill="white"
       />
     </svg>

diff --git a/packages/election-widgets/src/votes-comparison/react-components/list.js b/packages/election-widgets/src/votes-comparison/react-components/list.js
@@ -146,6 +146,8 @@ const TCell = styled.div`
    */
   (props) => {
     const baseCss = `
+      position: relative;
+
       a {
         color: #d6610c;
         text-decoration: none;
@@ -167,7 +169,7 @@ const TCell = styled.div`
           padding: 15px;
           text-align: left;
           line-height: 150%;
-          height: ${props.multiLines ? 'none' : '53px'};
+          height: ${props.multiLines ? 'none' : '53px'}; 
           border-left: 1px solid rgba(0, 0, 0, 0.1);
           &:first-child {
             border-left: none;
@@ -193,13 +195,12 @@ const TCell = styled.div`
             padding: 15px;
             text-align: left;
             line-height: 150%;
-            height: ${props.multiLines ? 'none' : '56px'};
-
             border-left: 1px solid rgba(0, 0, 0, 0.1);
+            height: 56px;
           }
 
           @media ${breakpoint.devices.tabletBelow} {
-            height: ${props.multiLines ? 'none' : '53px'};
+            height: none;
           }
         `
       }
@@ -264,23 +265,118 @@ const THead = styled.div`
 const EntityCell = styled.div`
   ${/**
    *  @param {Object} props
-   *  @param {boolean} props.multiLines
+   *  @param {Object} props.theme
+   *  @param {boolean} [props.multiLines]
    */
   (props) => {
-    return `
-        display: ${props.multiLines ? 'flex' : 'inline-flex'};
-      `
+    const baseCss = `
+      display: ${props.multiLines ? 'flex' : 'inline-flex'};
+      align-items: center;
+      position: relative;
+
+      > a {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      span {
+       margin-right: 22px;
+      }
+    `
+    const intervalTiltCss = `
+      &:not(:first-child):before {
+        content: '/';
+        color: rgba(15, 45, 53, 0.3);
+        font-size: 14px;
+        font-weight: 700;
+        position: absolute;
+        top: 50%;
+        left: -14px;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 21px;
+      }
+    `
+    const intervalEmptyCss = `
+      &:not(:first-child):before {
+        content: '';
+        width: 0;
+        height: 0;
+      }
+    `
+
+    switch (props.theme?.device) {
+      case 'mobile': {
+        return `
+          ${baseCss}
+          ${props.multiLines ? intervalEmptyCss : intervalTiltCss};
+        `
+      }
+      case 'rwd':
+      default: {
+        return `
+          ${baseCss}
+          ${props.multiLines ? intervalEmptyCss : intervalTiltCss};
+
+          @media ${breakpoint.devices.laptop} {
+            ${intervalEmptyCss}
+            width: 100%;
+            min-height: 52px;
+
+            span {
+              margin-right: 0px;
+            }
+          }
+        `
+      }
+    }
   }}
-  align-items: center;
+`
+
+const LegislatorPartyNotion = styled.span`
+  ${/**
+   *  @param {Object} props
+   *  @param {Object} props.theme
+   */
 
-  > a {
-    display: inline-flex;
-    align-items: center;
-  }
+  (props) => {
+    const baseCss = `
+      position: absolute;
+      color: rgba(15, 45, 53, 0.5);
+      text-align: right;
+      font-size: 10px;
+      max-width: 60px;
+      bottom: -8px;
+      right: 15px;
+    `
 
-  span {
-    margin-right: 8px;
-  }
+    switch (props.theme?.device) {
+      case 'mobile': {
+        return `
+          ${baseCss}
+          line-height: 12px;
+        `
+      }
+      case 'rwd':
+      default: {
+        return `
+          ${baseCss}
+          line-height: 14px;
+
+          @media ${breakpoint.devices.tablet} {
+            bottom: -12px;
+          }
+
+          @media ${breakpoint.devices.laptop} {
+            font-size: 12px;
+            top: -10px;
+            right: 30px;
+            max-width: none;
+          }
+        `
+      }
+    }
+  }}
 `
 
 /**
@@ -292,6 +388,7 @@ const EntityCell = styled.div`
 export default function List({ className, dataManager, scrollTo }) {
   const rows = dataManager.buildListRows()
   const heads = dataManager.buildListHead()
+  const data = dataManager.getData()
 
   const rowId =
     dataManager.findRowByDistrictName(scrollTo)?.id ?? rows?.[0]?.id ?? 'row-1'
@@ -414,6 +511,10 @@ export default function List({ className, dataManager, scrollTo }) {
     )
   })
 
+  // Since election-type `legislator-party` has `tksRate1`（第一階段投票率） & `tksRate2` data, but only need to show `tksRate1` and add notion: `*得票率=第一階段得票率`.
+  // so it's necessary to determine the election type and whether the head is `得票率`.
+  const shouldShowHeadNotion = Boolean(data?.type === 'legislator-party')
+
   return (
     <Table className={className} ref={tableRef}>
       <THead>
@@ -422,6 +523,12 @@ export default function List({ className, dataManager, scrollTo }) {
             return (
               <TCell data-column-id={idx} key={`head_${idx}`}>
                 {head}
+
+                {shouldShowHeadNotion && head === '得票率' && (
+                  <LegislatorPartyNotion>
+                    *得票率 = 第一階段得票率
+                  </LegislatorPartyNotion>
+                )}
               </TCell>
             )
           })}

diff --git a/packages/election-widgets/src/votes-comparison/react-components/manager.js b/packages/election-widgets/src/votes-comparison/react-components/manager.js
@@ -37,6 +37,10 @@ import { AnonymousIcon, ElectedIcon } from './icons'
 
 const ImgBlock = styled.div`
   margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   img,
   svg {
     width: 32px;
@@ -48,6 +52,17 @@ const ImgBlock = styled.div`
 
   ${(props) => {
     switch (props.theme?.device) {
+      case 'mobile': {
+        return `
+          @media ${breakpoint.devices.laptop} {
+            img, svg {
+              width: 32px;
+              height: 32px;
+            }
+          }
+        `
+      }
+
       case 'rwd':
       default: {
         return `
@@ -347,7 +362,7 @@ export class LegislatorPartyDataManager extends DataManager {
       // 得票率
       [
         {
-          label: p?.tksRate?.toLocaleString() ?? '-',
+          label: p?.tksRate1?.toLocaleString() ?? '-',
         },
       ],
       // 當選席次

diff --git a/packages/election-widgets/src/votes-comparison/react-components/typedef.js b/packages/election-widgets/src/votes-comparison/react-components/typedef.js
@@ -76,7 +76,8 @@ export default {}
  *  @property {string} candNo
  *  @property {Entity} party
  *  @property {number} tks
- *  @property {number} tksRate
+ *  @property {number} tksRate1 //第一階段得票率
+ *  @property {number} tksRate2 //第二階段得票率
  *  @property {number} seats
  */