! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Blazor를 사용하여 투자 수익률 계산기 빌드 > 온라인 스터디

본문 바로가기

ComponentOne

온라인 스터디

Blazor Blazor를 사용하여 투자 수익률 계산기 빌드

페이지 정보

작성자 GrapeCity 작성일 2021-08-13 15:34 조회 922회 댓글 0건

본문

첨부파일

ComponentOne Blazor Edition은 그리드, 차트, 입력과 기타 컨트롤을 포함한 고성능 컨트롤 집합을 제공합니다. FlexGrid는 언제나 인기 있는 그리드 컨트롤이었고 ComponentOne Blazor Edition에 컨트롤로 통합된 후에도 많은 개발자 분들로부터 지속적인 사랑을 받고 있습니다.


테이블 데이터 편집, 정렬, 필터링 및 FlexGrid 그룹화 등의 기본 기능은 주문형 로드, 사용자 정의 셀, 내장 편집기 컨트롤, 전체 텍스트 검색 & 필터, 응답 열 레이아웃, 선택 및 내보내기를 포함한 기타 고급 기능도 제공합니다.


이처럼 기능이 풍부한 컨트롤을 Blazor와 결합하면 한 단계 높은 수준의 웹 응용 프로그램을 만들 수 있습니다. Blazor 에디션에 대한 자세한 내용은 데모문서를 참조하세요.


이 블로그에서는 기능이 풍부한 FlexGrid 컨트롤을 사용하여 투자 계산기와 같은 흥미로운 사용 사례 시나리오를 구현합니다.


투자 계산기를 사용하면 현재 일반적으로 사용되고 있는 투자에 대한 미래 수익을 계산할 수 있습니다. 투자 수익률의 다양한 측면을 계산하는 투자 계산기용 템플릿이 많이 있습니다.


이 블로그는 이러한 투자 계산기 템플릿 중 하나를 선택하고 BlazorComponentOne Blazor FlexGrid 컨트롤을 사용하여 이 템플릿을 구현하는 방법을 설명합니다.



사용 사례


이 블로그에서 만든 투자 계산기는 예치된 금액과 수익률을 기준으로 각 투자 기간별 수익률을 계산합니다. 누적 측정값으로 특정 기간에 발생한 총 이자와 현재 투자의 미래 가치를 계산합니다.


다음은 이후 섹션에서 설계하는 방법을 배울 계산기에 대한 간략한 보기입니다.

이미지1


아래 단계는 Blazor를 사용하여 이 투자 계산기를 만드는 방법을 자세히 설명합니다.


FlexGrid를 사용하여 Blazor 응용 프로그램 설정


Blazor 서버 응용 프로그램 템플릿을 사용하여 Blazor 응용 프로그램을 만드는 것으로 시작합니다.


이미지2

응용 프로그램이 생성되면 Nuget 패키지 관리자를 사용하여 C1.Blazor.FlexGrid 패키지를 설치하고 FlexGrid 컨트롤 작업을 시작하는 데 필요한 클라이언트 측 참조를 추가해야 합니다.


FlexGrid quickstart는 FlexGrid 컨트롤을 Blazor 응용 프로그램에 추가하는 자세한 단계를 제공합니다.


FlexGrid는 바인딩 모드와 바인딩 해제 모드 모두에서 잘 작동합니다. 이 응용 프로그램의 경우 FlexGrid의 다른 셀을 채우기 위해 수행할 계산을 기반으로 몇 가지 값을 입력해야 하므로 FlexGrid 바인딩 해제 모드로 작업합니다. FlexGrid의 바인딩 해제 모드를 설명하는 데모문서를 참조하세요.


아래 코드는 프로젝트가 FlexGrid quickstart에 따라 구성되었고 Razor 컴포넌트가 이미 프로젝트에 추가되었다고 가정합니다.


이제 다음 코드를 Razor 페이지에 추가하여 필요한 수의 행과 열을 명시적으로 추가하여 바인딩 해제 모드에 대한 FlexGrid 컨트롤을 추가하고 구성합니다.

@page "/"
@using C1.Blazor.Core
@using C1.Blazor.Grid
​
<FlexGrid @ref="grid"
        CellFactory="@cellFactory"
        MergeManager="@custommergemanager"
        HeadersVisibility="GridHeadersVisibility.None"
        SelectionMode="GridSelectionMode.Cell"
        GridLinesVisibility="GridLinesVisibility.None"
        CellEditEnded="OnCellEditEnded" BeginningEdit="OnBeginningEdit" SelectionChanging="OnSelectionChanging"
        Style="@("max-height:100vh; max-width:97vh;position: absolute; top: 10%; left: 25%; ")">
  <FlexGridColumns>
      <GridColumn Width="14" IsReadOnly="true" />
      <GridColumn Width="67" IsReadOnly="true" />
      <GridColumn Width="147" Format="c2" IsReadOnly="true" />
      <GridColumn Width="147" Format="c2" IsReadOnly="true" />
      <GridColumn Width="147" Format="c2" IsReadOnly="true" />
      <GridColumn Width="164" Format="c2" />
      <GridColumn Width="14" IsReadOnly="true" />
  </FlexGridColumns>
  <FlexGridRows>
      @for (int i = 0; i < 378; i++)
      {
          if (i == 0)
          {
              <GridRow Height="50" />
          }
          else
          {
              <GridRow Height="25" />
          }
      }
  </FlexGridRows>
</FlexGrid>
​
@code
{
  FlexGrid grid;
  GridCellFactory cellFactory = new CustomCellFactory();
  CustomMergeManager custommergemanager = new CustomMergeManager();
}


참고: 몇 가지 오류가 발생하지만 나머지 단계를 계속하고 적절한 코드를 추가하면 해결됩니다.


설계 투자 계산기 레이아웃


이제 투자 계산기와 비슷하게 FlexGrid 모양을 사용자 정의해 보겠습니다. 열 너비, 행 높이, 셀 병합, 셀 형식 지정 및 계산기 필드 레이블을 FlexGrid의 적절한 셀로 채워 동일한 작업을 수행합니다.


아래 섹션에서는 필요한 모든 사용자 정의를 적용하는 방법에 대한 세부 정보를 제공합니다.



셀 병합


FlexGrid는 인접한 셀에 동일한 내용이 있는 경우 행이나 열에 걸쳐 셀을 병합할 수 있는 기본 제공 기능이 있습니다. GridMergeManager 클래스를 상속하여 FlexGrid의 기본 병합 동작을 사용자 정의하여 행 및 열에 걸쳐 셀을 병합하기 위한 사용자 정의 로직을 정의할 수 있습니다.


이 구현을 위해 FlexGrid에서 미리 정의된 셀 목록을 병합하여 투자 계산기에 대한 적절한 셀 표시를 렌더링하는 사용자 정의 MergeManager를 정의해야 합니다. 아래 코드는 FlexGrid에서 필요한 셀을 병합합니다.

//Define custom MergeManager class to merge cell ranges based on custom logic
public class CustomMergeManager : GridMergeManager
{
  public override GridCellRange GetMergedRange(GridCellType cellType, GridCellRange range)
  {
    //Merge cells containing Calculator title
    if (cellType == GridCellType.Cell && (range.Row == 0 && range.Column >= 0 && range.Column <= 5))
    {
        GridCellRange range1 = new GridCellRange(0, 0, 0, 5);
        return range1;
    }
​
    //Merge cells containing calculator description
    if (cellType == GridCellType.Cell && range.Column >= 1 && range.Column <= 2)
    {
        if (range.Row == 2 || range.Row == 3 || range.Row == 5 || range.Row == 6 || range.Row == 8 || range.Row == 9)
        {
          GridCellRange range2 = new GridCellRange(range.Row, 1, range.Row, 2);
          return range2;
        }
    }
​
    //Merge cells containing calculator field labels
    if (cellType == GridCellType.Cell && range.Column >= 3 && range.Column <= 4)
    {
        if (range.Row == 2 || range.Row == 3 || range.Row == 4 || range.Row == 6 || range.Row == 7 || range.Row == 8 || range.Row == 10 || range.Row == 11)
        {
          GridCellRange range3 = new GridCellRange(range.Row, 3, range.Row, 4);
          return range3;
        }
    }
​
      return base.GetMergedRange(cellType, range);
​
    }
  }
}



필드 레이블 추가

아래 코드에서 투자 계산기 필드 레이블을 바인딩 해제 FlexGrid의 적절한 셀에 채웁니다.

//Override AfterRender method to populate grid for Calculator fields
protected override void OnAfterRender(bool firstRender)
{
  if (firstRender)
    GenerateCalculator();
}
​
// Fill unbound grid to showcase calculator fields and results
private void GenerateCalculator()
{
  //Populate calculator field labels
  grid[0, 0] = "Investment Calculator";
​
  grid[2, 1] = "Calculate your investment ";
  grid[3, 1] = "returns.";
  grid[5, 1] = "Enter values into the yellow";
  grid[6, 1] = " boxes.";
  grid[8, 1] = "Results will be shown in the ";
  grid[9, 1] = "green boxes.";
​
  grid[2, 3] = "Initial Investment Amount:";
  grid[3, 3] = "Annual Rate of Return:";
  grid[4, 3] = "Deposit Amount per Period:";
​
  grid[6, 3] = "Duration of Investment (In Years):";
  grid[7, 3] = "Number of Deposits Per Year:";
  grid[8, 3] = "Total Number of Periods (Upto 360):";
​
  grid[10, 3] = "Total Interest Income:";
  grid[11, 3] = "Ending Balance(FV):";
​
  grid[15, 1] = "Period";
  grid[15, 2] = "Initial Balance";
  grid[15, 3] = "Interest Earned";
  grid[15, 4] = "New Deposit";
  grid[15, 5] = "New Balance";
​
  //Populate initial values for initial investment Amount, Return rate and deposit amount per period
  grid[2, 5] = 5000;
  grid[3, 5] = Convert.ToString(10) + "%";
  grid[4, 5] = 100;
​
  //Populate initial values for Investment duration(in years), number of deposits per year
  grid[6, 5] = Convert.ToString(30);
  grid[7, 5] = Convert.ToString(12);
​
  //Invoke method to calculate investment return
  CalculateReturn();
}



셀 스타일 적용


적절한 병합 셀에 필요한 모든 레이블을 추가했습니다. 이제 셀에 스타일을 적용하여 투자 계산기의 모양과 느낌을 개선하고 보다 사실적으로 표현하도록 하겠습니다. FlexGrid의 셀에 스타일을 적용하려면 GridCellFactory 클래스를 상속하여 각 셀에 개별적으로 스타일을 정의할 수 있는 사용자 정의 CellFactory 클래스를 만듭니다. 배경색, 전경색, 테두리, 글꼴 등을 적용하여 셀의 스타일을 지정할 수 있습니다.


아래 코드는 사용자 정의 CellFactory를 정의하고 FlexGrid의 모든 셀의 스타일을 정의합니다.

public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)
{
  base.PrepareCellStyle(cellType, range, style, internalBorders);
​
  //Style Calculator border
  if (cellType == GridCellType.Cell)
  {
      if (range.Column == 0 && range.Row >= 1 && range.Row <= 376)
      {
        style.BorderColor = C1Color.Black;
        style.BorderLeftWidth = new C1Thickness(2);
      }
​
      if (range.Column == 6 && range.Row >= 1 && range.Row <= 376)
      {
        style.BorderColor = C1Color.Black;
        style.BorderRightWidth = new C1Thickness(2);
      }
​
      if (range.Row == 0)
      {
        style.BorderColor = C1Color.Black;
        style.BorderBottomWidth = new C1Thickness(2);
      }
​
      if (range.Row == 376)
      {
        style.BorderColor = C1Color.Black;
        style.BorderBottomWidth = new C1Thickness(2);
      }
  }
​
  //Style calculator title
  if (cellType == GridCellType.Cell && range.Column >= 0 && range.Column <= 6 && range.Row == 0)
  {
      style.BackgroundColor = C1Color.FromARGB(255, 112, 173, 70); ;
      style.FontSize = 32;
      style.FontWeight = "Arial";
      style.Color = C1Color.White;
  }
​
  //Style calculator description
  if (cellType == GridCellType.Cell && range.Column == 0 && range.Row == 3)
  {
      style.FontSize = 10;
      style.FontWeight = "Arial";
  }
​
  //Style Calculator fields labels and inputs
  if (cellType == GridCellType.Cell && range.Column >= 3 && range.Column <= 4)
  {
      if (range.Row >= 2 && range.Row <= 11)
      {
        if (range.Row != 5 && range.Row != 9)
        {
            style.BorderColor = C1Color.Black;
            style.BorderWidth = new C1Thickness(1);
            style.BackgroundColor = C1Color.FromARGB(255, 112, 173, 70);
            style.Color = C1Color.White;
            style.JustifyContent = C1StyleJustifyContent.FlexEnd;
        }
    }
    if (range.Row == 12 && range.Column >= 3 && range.Column <= 4)
    {
        style.BorderColor = C1Color.Black;
        style.BorderTopWidth = new C1Thickness(1);
    }
  }
​
  if (cellType == GridCellType.Cell && range.Column == 5)
  {
      if (range.Row >= 2 && range.Row <= 7)
      {
        if (range.Row != 5)
        {
            style.BorderColor = C1Color.Black;
            style.BorderWidth = new C1Thickness(1);
            style.BackgroundColor = C1Color.White;                      
            style.JustifyContent = C1StyleJustifyContent.FlexEnd;
        }
      }
​
      if (range.Row >= 8 && range.Row <= 11)
      {
        if (range.Row != 9)
        {
            style.BorderColor = C1Color.Black;
            style.BorderWidth = new C1Thickness(1);
            style.BackgroundColor = C1Color.FromARGB(255, 226, 239, 219);                      
            style.JustifyContent = C1StyleJustifyContent.FlexEnd;
        }
      }
​
      if (range.Row == 12)
      {
        style.BorderColor = C1Color.Black;
        style.BorderTopWidth = new C1Thickness(1);
      }
  }
​
  //Style investment return table
  if (cellType == GridCellType.Cell && range.Column >= 1 && range.Column <= 5)
  {
      if (range.Row >= 15 && range.Row <= 375)
      {                  
        if (range.Row == 15)
        {
            style.BackgroundColor = C1Color.FromARGB(255, 112, 173, 70);
            style.Color = C1Color.White;
            style.JustifyContent = C1StyleJustifyContent.Center;
        }
        else
        {
            if (range.Row % 2 == 0)
                style.BackgroundColor = C1Color.FromARGB(255, 226, 239, 219);
            else
                style.BackgroundColor = C1Color.FromARGB(255, 255, 255, 255);
            style.JustifyContent = C1StyleJustifyContent.FlexEnd;
        }
​
        if (range.Column == 1)
        {
            style.JustifyContent = C1StyleJustifyContent.Center;
        }
      }
​
      if (range.Row == 376)
      {
        style.BorderColor = C1Color.Black;
        style.BorderTopWidth = new C1Thickness(1);
      }
    }
  }
}


다음은 위에서 언급한 모든 단계를 수행한 후 투자 계산기로 설계된 FlexGrid 컨트롤의 간략한 모습입니다.

이미지3



투자 계산기 계산 구현


위에서 설계된 투자 계산기는 세 가지 컬러로 구성되며, 진한 녹색은 정적 값인 필드 레이블을 포함하는 셀을 지정하는 데 사용되며, 흰색 셀은 사용자가 계산을 수행하는 데 필요한 값을 입력하는 입력 셀이며, 연한 녹색은 계산된 셀을 표시하는 데 사용되는 기호입니다.


이 값은 실제로 이 계산기에서 수행된 모든 계산의 결과이며, 투자 수익률입니다. 이 모든 셀 중 사용자 입력이 필요한 흰색 셀만 편집할 수 있습니다.


이 섹션에서는 투자 수익을 계산하기 위해 계산을 수행하는 방법을 정의합니다. 아래의 메서드는 투자 기간별 투자 수익률, 총이자, 투자 금액의 미래 가치를 계산합니다. 일부는 기본 연산자를 사용하여 더하기, 빼기, 곱하기 및 나누기 계산을 수행했습니다. 투자의 미래 가치를 계산하기 위해서는 재무 함수인 FV를 사용해야 합니다.


C#.Net에서 재무 기능을 호출하려면 Microsoft.VisualBasic 패키지를 설치해야 합니다. Microsoft.VisualBasic 네임스페이스의 Financial 클래스에서 사용할 수 있는 다양한 재무 기능이 있습니다. 아래 코드에서는 Financial 클래스의 FV 재무 함수를 사용했습니다.


C#에서 다양한 계산이 구현되어 계산기가 작동하도록 하고 셀을 적절한 투자 수익률 값으로 채우려면 아래 코드를 참조하세요.

//Method to calculate investment return
public async Task<bool> CalculateReturn()
{
  //Fetch initial investment amount
  int initialAmt = Convert.ToInt32(grid[2, 5]);
​
  //Fetch Rate of return by removing percentage sign
  string rate = (string)grid[3, 5];
  int ror = Convert.ToInt32(rate.Replace("%", " "));
​
  //Fetch deposit amount
  int depositAmt = Convert.ToInt32(grid[4, 5]);
​
  //Fetch total duration of investment(in years)
  int investmentYears = Convert.ToInt32(grid[6, 5]);
​
  //Fetch number of deposists in an year
  int numDeposits = Convert.ToInt32(grid[7, 5]);
​
  //Calculate total number of periods and assign to respective grid cell
  int totalPeriods = investmentYears * numDeposits;
​
  //Make sure total number of periods is not more than 360
  if (totalPeriods <= 360)
  {
      grid[8, 5] = Convert.ToString(totalPeriods);
  }
  else
  {
    grid[8, 5] = null;
    await JsRuntime.InvokeVoidAsync("alert", "Please make sure total number of periods is upto 360 !!");
    return false;
  }
​
  //Calculate investment return for each period in investment duration
  for (int period = 1, row = 16; row <= 375; row++, period++)
  {
    if (period <= totalPeriods)
    {
      grid[row, 1] = period;
      if (row == 16)
      {
          grid[row, 2] = initialAmt;
      }
      else
      {
          grid[row, 2] = grid[row - 1, 5];
      }
      grid[row, 3] = (((Convert.ToDouble(ror) / Convert.ToDouble(numDeposits)) * Convert.ToInt32(grid[row, 2])) / 100);
      grid[row, 4] = depositAmt;
      grid[row, 5] = Convert.ToInt32(grid[row, 2]) + Convert.ToDouble(grid[row, 3]) + Convert.ToInt32(grid[row, 4]);
    }
    else
    {
        grid[row, 1] = grid[row, 2] = grid[row, 3] = grid[row, 4] = grid[row, 5] = null;
    }
  }
​
  //Calculate Future Value of investment/Ending Balance
  double Rate = Convert.ToDouble(ror) / (Convert.ToDouble(numDeposits) * 100);
  double NPer = Convert.ToDouble(totalPeriods);
  double Pmt = Convert.ToInt32(depositAmt);
  double PV = Convert.ToInt32(initialAmt);
  double fv = -(Financial.FV(Rate, NPer, Pmt, PV));
  grid[11, 5] = fv;
​
  //Calculate total interest income
  double endingBal = fv - initialAmt - (depositAmt * totalPeriods);
  grid[10, 5] = endingBal;
​
  return true;
}



UI 상호 작용 사용자 정의


투자 계산기는 FlexGrid를 사용하여 작성되었으므로, FlexGrid의 편집 및 선택과 관련된 기본 동작은 계산기의 동작에 맞게 처리되어야 합니다. 이 섹션에서는 계산기에 대한 사용자 상호 작용 동작을 변경하기 위해 처리해야 하는 FlexGrid 이벤트에 대해 설명합니다.


먼저 사용자가 계산기의 입력 값(예를 들면 수익률, 초기 투자 금액, 예금 금액 또는 투자 기간)을 변경할 때마다 계산기가 모든 투자 수익 값을 다시 계산하도록 FlexGrid의 CellEditEnded 이벤트를 처리해야 합니다.


아래 코드는 앞서 언급한 동작을 구현합니다.

//Handle Flexgrid's CellEditEdited event to recalcuate investment return
//when either of the values Rate of Return, Deposit Amount etc. are changed
public async void OnCellEditEnded(object sender, GridCellRangeEventArgs e)
{
  //Parse string input value to int and assign to cell
  if (e.CellRange.Row == 2 || e.CellRange.Row == 4)
  {
    grid[e.CellRange.Row, e.CellRange.Column] = Convert.ToInt32((string)grid[e.CellRange.Row, e.CellRange.Column]);
  }
​
  //Add percentage sign to Rate of Return
  if (e.CellRange.Row == 3)
  {
      grid[e.CellRange.Row, e.CellRange.Column] = (string)grid[e.CellRange.Row, e.CellRange.Column] + "%";
  }
​
  //Invoke method to reclaculate investment return based on new values.
  await CalculateReturn();
}


다음으로 FlexGrid에서 편집을 제한하기 위해 FlexGrid의 BeginningEdit 이벤트를 처리합니다. 위에서 설명한 것처럼 FlexGrid의 모든 셀은 편집할 수 없어야 합니다. 사용자는 사용자의 입력 값이 필요한 셀만 편집할 수 있어야 합니다.


따라서 아래 코드는 언급한 동작을 구현하기 위해 BeginningEdit 이벤트를 처리합니다.

//Handle Flexgrid's BeginningEdit event to cancel editing for cells.
public void OnBeginningEdit(object sender, GridCellRangeEventArgs e)
{
  if (e.CellRange.Row >= 8 && e.CellRange.Row <= 375)
        e.Cancel = true;
}


마지막으로 FlexGrid의 SelectionChanging 이벤트를 처리하여 사용자가 FlexGrid에서 편집 가능한 셀만 선택할 수 있도록 합니다.

//Handle Flexgrid's SelectionChanging event to disable selection of non editable cells.
public void OnSelectionChanging(object sender, GridCellRangeEventArgs e)
{
  if (!(e.CellRange.Row >= 2 && e.CellRange.Row <= 7))
  {
    if (e.CellRange.Row != 5)
          e.Cancel = true;
  }
  else if (e.CellRange.Column >= 1 && e.CellRange.Column <= 4)
  {
    e.Cancel = true;
  }
}


다음은 투자 계산기의 실제 작동을 보여주는 GIF입니다.

Gif


설명된 시나리오를 구현하는 샘플은 여기에서 다운로드할 수 있고, 서식 지정 및 계산 방식을 동일하게 적용하여 다른 유형의 투자 계산기를 설계할 수 있습니다.





지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.