
English: 
in this lesson we will add two charts to
the dashboard for a quick analysis
over the issues of the application
in one chart
we want to represent the proportion of
issues by priority
and on the other chart we want to show
the number of
issues submitted over the last seven days
so let me first just
add here some structure to the page to
hold this chart I will add the container
below these lists and
another container inside this one that I
will size to
six columns so this will be one of the
containers for the charts
I will add another container next to
this one
for the second chart now let me add
another container for the title
of the first chart and this will be
the workload and set the style of this
container to be
heading one and let's remove here this
margin that we don't need

Japanese: 
このレッスンでは、ダッシュボードに問題を解析するチャートを２つ追加します。
一つのチャートには、優先度毎に問題の比率を表示し、
もう一つのチャートには過去７日間の問題発生数を表示します。
まず、ページにチャートを持つための構造を加えます。
これらのリストの下にContainerを加え、
この中にさらに新しいContainerを加え、
サイズを６カラムに変更します。
右隣にもう一つContainerを加え、
１つめのチャートにタイトル用に
新しいContainerを加えます。
タイトルをWorkoadとし、
スタイルをHeading 1に変更し、
上部のマージンを取り除きます。

English: 
let me add a container below this one
there and
now I want to add a chart here
on this container and the charts pretty
much like the widgets in the previous
videos
they are available by default when you
create a new eSpace module
you'll find them under this charts option
here
and the chart that I want to use for the
proportion of
issues is a pie chart so let me just
add here
to the container and this pie chart
widget
works pretty much like the table records
or the list records we need to feed it with
a lists of records that will represent
the data points of the chart and these
these records they have a structure
and this structure is... you'll find it
here under the charts option

Japanese: 
タイトルの下にチャート用の新しいContainerを加えます。
ここにチャートを加えます。
チャートは、前回のレッスンで使用したWidgetsと
とてもよく似ています。
新しいeSpaceモジュールを作成すると
デフォルトで利用可能になります。
InterfaceタブにChartsオプションがあり、
円グラフを使って情報を表示します。
チャートウィジェットは、List Recordsや
Table Recordsのような動作をします。
よって、引数を渡す必要があり、一つは必須の引数です。
チャートに表示されるデータのRecord Listを渡す必要があります。
データはここにあるDataPoint構造体で表されるものです。

English: 
the is the data point structure so this
structure represents
a value in the chart so for this first
chart the workload pie chart we need to
create
variable here which will be the
workload
and this will be a record list
of data points
so this variable will have the
list of values to
show on the chart so we need to bind it
to the chart
and I'm also going to set the height of
the chart to be 200
now we need we need to initialize this
list
with the values that we want to represent
on this chart and we'll do that
on the preparation of the screen and the
values that we want to show on the chart

Japanese: 
DataPointはこのチャートに渡す値として使われる基本構造です。
ローカル変数をDataPointのListとして作成しWorkloadとします。
これをチャートにセットし、
チャートの高さを200ピクセルとします。
次にチャートのデータをこのRecord Listに取り込みます。
画面のPreparationで、

English: 
are the number of high priority issues
the number of low priority issues and
the number
of issues that are unclassified now
we already have here a couple of queries
that get me
the high priority issues and the low
priority issues
we can use the count property of these
queries
to get those values we need to have
the number of unclassified issues as
well and we're going to reuse the action
that we created on a
previous video so let's go here to the
logic
this action here count issues by
priority
and using this action with
the priority ID set to null
we're going to count the number of
unclassified issues
so we have everything that we need now
we need to
initialize our list our record list
of data points and to do that I'm going
to use another

Japanese: 
Unclassified、High Priority、Low Priorityの
Issueの数を表示します。
High PriorityとLow PriorityのIssueを取得する
クエリ２つはすでにあるので、
これを使ってクエリのCountプロパティの値を
チャートに渡します。
Unclassified Issuesの数を取得するために、
前回のレッスンで作成したアクションを再利用します。
LogicタブのCountIssuesByPriorityアクション
を使い、
PriorityIdをNullにセットして
Unclassified Issuesの数を取得します。
DataPointのListまたはRecordListを初期化するために、

English: 
action that comes from this charts
component
This is the DataPoint_Init action
basically this action initializes a
record
of that structure data point so we
need to pass these values here
the label and the value these are the
mandatory ones
and we're going to pass also the color
for this pie chart
so let's let's go ahead and do this the
label
so the first value will be for the high
priority
and the value for the high priority we'll
get it from the
count property up his query
there now we need to set also the color
and I'm going to use the same color we
used for the CSS
for the the dashboard page in this case
this is going to be
#e70101
and and that's it so we have a record

Japanese: 
ChartsコンポーネントのDataPoint_Initアクションを使います。
DataPoint_InitはDataPointを初期化します。
必須項目であるLabelとValue、そしてColorを
セットします。
まずは、High Priority用に、Labelに"High Priority"、
ValueはGetHighPriorityIssuesクエリからCountプロパティを選択します。
最後のColorには、High Priority用の色をセットします。
円グラフはデフォルトではCSSに定義された同じ色を使うので、
ここでは#E70101という色にします。
次にこのDataPoint変数をRecord Listに追加します。

Japanese: 
ビルトインActionのListAppendを使います。
ListAppendがDataPointレコードを
Record ListであるWorkload変数に加えます。
High Priorityについては終わりました。
同じことを残りの２つについても行います。
High Priority用のロジックを、コピー＆ペーストします。
２つのノードを接続し、Low Priorityと入力します。
GetLowPriorityIssuesクエリの値に変更し、

English: 
for our chart what we need to do now is to
add
this record to our workload record list
and to do that I'm going to use another
action here
this is a built-in action called ListAppend
this first one
basically this action appends do this
first parameter to the record list
let's select here workload it appends to
this record list
the record that we just initialized with
this action
this one and that's it for the high priority
we need to repeat these steps for the
other two values so let me just get some
space here
I'm going to copy/paste these two nodes
and reconnect here the ListAppend
to
this other node now for this data
point initialization
we're going to set the low priority
value

Japanese: 
Colorを#F28900に変更します。
Unclassifiedについても、コピー＆ペーストします。
これら２つのノードを接続し、
DataPoint_Init3にUnclassifiedの値をセットします。

English: 
and again the value comes from the
count property
and now from this other query
there and we're also going to set the
color
so let me just delete this and the
color for the low priority
is let me just put here the hash sign
#f28900
and we need to append now this data point
to our workload
and actually this is already fixed for me
when I copy pasted this was already
fixed so
it is appending the data point from
this initialization so it's done let's
finish this chart
with the third value so again copy paste
these
two nodes and connect these ones
and on this DataPoint_Init3
we're going to set the value for the
unclassified so this will be for the
unclassified

English: 
issues and we will get that
value from
the action in this case not the query the
action
that we used to count the unclassified
issue so this value here
and we'll also set the color for this
one
and the color will be all a values
so 6 A's here and we're done so let's
just connect this
and our chart is done let's just do the
second chart before we publish so that
we can see
everything in place so again coming back
here to the dashboard
our pie chart is done let's have
a title for our second chart so again
add a container
here this will be a Heading1 for the
title
and this will be the submitted issues
and let me just remove here this margin

Japanese: 
ここではクエリではなく、UnclassifiedIssuesの
数を取得するアクションを使います。
Colorを#AAAAAAにセットします。
これで円グラフに必要なすべての情報をセットしました。
では、２番目のチャートを作成します。
チャートのタイトル用に新しいContainerを追加します。
スタイルをHeading 1とし、タイトルを「Submitted Issues」として
マージンを取り除きます。

English: 
so add another container below this one
and the chart that we're going to use in
this case this will be a line chart
and again pretty much like the pie chart
we need to have
a record list of data points so
I'm going to show you another way
for you to initialize
a record list of data points and and
the way that we're going to do this
since this data point is a structure
we can use this structure as an output
of an advanced query so let's go ahead
here to the preparation and
let's add and advanced query here
add this will be the get submitted
issues and let me just arrange here the
flow
double-click set the output structure

Japanese: 
この後ろにチャート用の新しいContainerを追加します。
ここでは折れ線グラフを使います。
折れ線グラフは基本的には円グラフと同じです。
ここでもチャートにDataPointのRecord Listを渡す必要があります。
ここではさきほどとは別の方法で
DataPointsのRecord Listを初期化します。
PreparationでAdvancedクエリの中で
DataPoint構造体を用います。
Advancedクエリで報告された問題を取得します。
Output Structureをダブルクリックし、
AdvancedクエリのOutput Structureが

English: 
of this advanced query to be data point
and now I'm going to copy/paste
the SQL from the clipboard
I'm not going into too much detail about this SQL
here but it basically gets me the number of
issues in
each day from the last seven days and
now I need to bind
the output at this query I'll need to bind
this
output to my widget on the screen
so here this will be the output of this
query
and again I'm going to set the height
of this chart to be 200 as well
and we're all done so let's publish and
see our application
and here we have our application
our dashboard now with a couple of
charts
showing the workload and the number of
submitted issues

Japanese: 
DataPointになるようにセットします。
クリップボードからSQL文をコピー＆ペーストします。
過去７日間に報告された問題の数をセットします。
クエリのアウトプットを画面上のWidgetに結び付けます。
チャートの高さを200にセットし、
パブリッシュして動作を確認します。
ダッシュボードに２つのチャートが表示され、
ワークロードと過去7日間に報告された問題数が
表示されました。
以上でレッスンを終了します。

English: 
over the last seven days
And that's it!
