2년차 개발자의 모바일 랜딩페이지 제작기(3)

mobile
├── landing
│   ├── components
│   │   ├── GaugeChart.vue

<template>
  <div>
    <svg width="250" height="250" viewBox="0 0 210 170" :style="`width: ${props.graphSize}; height: ${props.graphSize}; background-color: white;`">
      <!-- 그라디언트 정의 -->
      <defs>
        <linearGradient :id="`gaugeGradient-${props.id}`" gradientUnits="userSpaceOnUse" :x1="startX" :y1="startY" :x2="activePath.activeX" :y2="activePath.activeY">
          <stop offset="0%" :stop-color="gaugeStartColor" />
          <stop offset="60%" :stop-color="gaugeEndColor" />
          <stop offset="100%" :stop-color="gaugeEndColor" />
        </linearGradient>
      </defs>
 
      <g transform="rotate(-90, 100, 100)">
        <!-- Background circle -->
        <path :d="`M ${startX} ${startY} A ${radius} ${radius} 0 1 1 ${endX} ${endY}`" stroke="#e5e5e5" fill="none" stroke-width="20" stroke-linecap="round" />
        <!-- Gauge arc with gradient -->
        <path :d="activePath.path" :stroke="`url(#gaugeGradient-${props.id})`" fill="none" stroke-width="20" stroke-linecap="round" />
        <!-- Ticks and labels -->
        <g v-for="tick in ticks" :key="tick.angle">
          <line
            :x1="pointX(tick.angle, 15)"
            :y1="pointY(tick.angle, 15)"
            :x2="pointX(tick.angle, 20)"
            :y2="pointY(tick.angle, 20)"
            stroke="#b5b5b5"
            stroke-width="3"
            stroke-linecap="round"
          />
          <text
            v-if="tick.label"
            :x="pointX(tick.angle, 30)"
            :y="pointY(tick.angle, 30)"
            text-anchor="middle"
            alignment-baseline="middle"
            font-size="12"
            font-weight="600"
            fill="#b5b5b5"
            :transform="`rotate(90,${pointX(tick.angle, 30)}, ${pointY(tick.angle, 30)})`"
          >{{ tick.label }}</text>
        </g>
      </g>
      <image
        v-if="props.currentWindDirection"
        href="@/assets/mobile/ico/ico_wind_directio3.png"
        alt="풍향_이미지"
        x="88"
        y="45"
        width="24"
        height="24"
        :transform="`rotate(${props.currentWindDirection + 180}, 100, 57)`"
      />
      <text x="100" y="120" text-anchor="middle" fill="#333" font-size="60" font-family="'NanumSquare'">
        {{ props.currentWindSpeed ?? '-' }}
      </text>
      <text x="100" y="140" text-anchor="middle" fill="#C3CED7" font-size="18">
        m/s
      </text>
      <text x="100" y="165" text-anchor="middle" fill="#333" font-size="22">
        풍속
      </text>
    </svg>
  </div>
</template>

const props = defineProps<{
  currentWindSpeed: number
  valueType?: string
  graphSize?: string
  currentWindDirection?: number
  id?: string
}>()

const radius = 80
const maxWindSpeed = 60
 
const startAngle = -120
const endAngle = 120
const totalAngle = endAngle - startAngle
 
const pointX = (angle: number, adjustment = 0) => 100 + (radius + adjustment) * Math.cos(angle)
const pointY = (angle: number, adjustment = 0) => 100 + (radius + adjustment) * Math.sin(angle)

const startRadians = startAngle * Math.PI / 180
const startX = pointX(startRadians)
const startY = pointY(startRadians)
const endRadians = endAngle * Math.PI / 180
const endX = pointX(endRadians)
const endY = pointY(endRadians)

const activePath = computed(() => {
  let ratio = 0
  let activeAngle = 0
  if (props.valueType === 'normal') {
    // 가중치 미적용
    ratio = props.currentWindSpeed / maxWindSpeed
    activeAngle = startAngle + (ratio * totalAngle)
  } else {
    // 가중치 적용
    let stepIndex = windSpeedSteps.findIndex(step => props.currentWindSpeed <= step)
    if (stepIndex === -1) stepIndex = windSpeedSteps.length - 1 // 최대값 처리
    const lowerBound = windSpeedSteps[stepIndex - 1] || 0
    const upperBound = windSpeedSteps[stepIndex]
 
    ratio = (props.currentWindSpeed - lowerBound) / (upperBound - lowerBound)
    activeAngle = startAngle + ((stepIndex - 1 + ratio) / (windSpeedSteps.length - 1)) * totalAngle
  }
  const activeRadians = activeAngle * Math.PI / 180
  let activeX = pointX(activeRadians)
  let activeY = pointY(activeRadians)
  if (isNaN(activeX)) activeX = startX
  if (isNaN(activeY)) activeY = startY
  const largeArcFlag = activeRadians - startRadians <= Math.PI ? 0 : 1
 
  const path = `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${activeX} ${activeY}`
  return { activeX, activeY, path }
})

const ticks = computed(() => {
  const tickValues = [0, 1, 3.5, 6, 10, 35, 60]
  const labelValues = [0, 3.5, 10, 60]
 
  return tickValues.map((value) => {
    const stepIndex = windSpeedSteps.indexOf(value)
    const angle = startAngle + (stepIndex / (windSpeedSteps.length - 1)) * totalAngle
    return {
      angle: angle * Math.PI / 180,
      label: labelValues.includes(value) ? value.toString() : null
    }
  })
})

const gaugeStartColor = computed(() => {
  const endColor = gaugeEndColor.value
  if (!endColor) return '#FFFFFF' // 기본값으로 흰색 반환
  return getGradientColor(endColor)
})
 
const gaugeEndColor = computed(() => {
  const currentLegend = wsLegend.find(legend =>
    props.currentWindSpeed >= legend.min && props.currentWindSpeed < legend.max
  )
  return currentLegend?.clr
})