TKRadarChart icon indicating copy to clipboard operation
TKRadarChart copied to clipboard

Chart is too small and not centered?

Open kevinrenskers opened this issue 4 years ago • 1 comments

Screen Shot 2020-09-10 at 13 19 52

I expect the chart to fill the entire space within the white border, and that it's centered?

Code:

import Reusable
import TKRadarChart
import UIKit

final class ReportSpiderChart: UITableViewCell, Reusable, NibLoadable {
  let labels = ["ARTISTS", "TRACKS", "ALBUMS"]

  @IBOutlet private var chartView: TKRadarChart!
  private var data: ReportData?

  override func awakeFromNib() {
    super.awakeFromNib()
    chartView.configuration.borderWidth = 1
    chartView.dataSource = self
    chartView.delegate = self
    chartView.layer.borderWidth = 1
    chartView.layer.borderColor = UIColor.white.cgColor
  }

  func configure(data: ReportData) {
    self.data = data
    chartView.configuration.maxValue = CGFloat(max(data.artists, data.albums, data.tracks, data.previousArtists, data.previousAlbums, data.previousTracks))
    chartView.reloadData()
  }
}

extension ReportSpiderChart: TKRadarChartDataSource {
  func numberOfStepForRadarChart(_ radarChart: TKRadarChart) -> Int {
    return 3
  }

  func numberOfRowForRadarChart(_ radarChart: TKRadarChart) -> Int {
    return 3
  }

  func numberOfSectionForRadarChart(_ radarChart: TKRadarChart) -> Int {
    return 2
  }

  func titleOfRowForRadarChart(_ radarChart: TKRadarChart, row: Int) -> String {
    return labels[row]
  }

  func valueOfSectionForRadarChart(withRow row: Int, section: Int) -> CGFloat {
    guard let data = data else {
      return 0
    }

    if row == 0 {
      return CGFloat(section == 0 ? data.artists : data.previousArtists)
    }

    if row == 1 {
      return CGFloat(section == 0 ? data.albums : data.previousAlbums)
    }

    if row == 2 {
      return CGFloat(section == 0 ? data.tracks : data.previousTracks)
    }

    return 0
  }
}

extension ReportSpiderChart: TKRadarChartDelegate {
  func colorOfLineForRadarChart(_ radarChart: TKRadarChart) -> UIColor {
    return .reportDivider
  }

  func colorOfFillStepForRadarChart(_ radarChart: TKRadarChart, step: Int) -> UIColor {
    return .black
  }

  func colorOfSectionFillForRadarChart(_ radarChart: TKRadarChart, section: Int) -> UIColor {
    return section == 0 ? UIColor.reportRed.withAlphaComponent(0.75) : UIColor.reportChartInactive.withAlphaComponent(0.75)
  }

  func fontOfTitleForRadarChart(_ radarChart: TKRadarChart) -> UIFont {
    return .systemFont(ofSize: 11, weight: .semibold)
  }

  func colorOfTitleForRadarChart(_ radarChart: TKRadarChart) -> UIColor {
    return .reportGrayText
  }
}

kevinrenskers avatar Sep 10 '20 11:09 kevinrenskers

By manually adjusting chartView.configuration.radius and chartView.centerPoint I can get it to look how I want it to, but it seems weird this needs to be done manually.

Screen Shot 2020-09-10 at 13 28 32

This is with

chartView.configuration.radius = 140
chartView.centerPoint = CGPoint(x: (chartView.frame.width / 2) - 18, y: 156)

kevinrenskers avatar Sep 10 '20 11:09 kevinrenskers